This article has shared the specific code of the js shopping cart function for your reference. The specific content is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
li {
float: left;
width: 200px;
border: 1px #000 solid;
margin: 10px;
}
li img {
width: 200px;
}
p {
height: 20px;
border-bottom: 1px #333 dashed;
}
#bus {
width: 600px;
border: 1px #000 solid;
height: 300px;
clear: both;
}
.box1 {
float: left;
width: 200px;
}
.box2 {
float: left;
width: 200px;
}
.box3 {
float: left;
width: 200px;
}
#allMoney {
float: right;
}
</style>
<script>
= function() {
var oList = ('list');
var aLi = ('li');
var oBus = ('bus');
var obj = {};
var iNum = 0;
var allMoney = 0;
for (var i = 0; i < ; i++) {
aLi[i].ondragstart = function(ev) {
// When clicking to drag the element, set the data. When put in the shopping cart, the data can be transmitted over. var ev = ev || ;
var aP = ('p');
('title', aP[0].innerHTML);
('price', aP[1].innerHTML);
(this, 0, 0);
}
}
= function(ev) {
//Block the default mouse event var ev = ev || event;
();
};
= function(ev) {
var ev = ev || event;
var title = ('title');
var price = ('price');
if(!obj[title]){
var oP = ('p');
var oSpan = ('span');
= 'box1';
= 1;
(oSpan);
var oSpan = ('span');
= 'box2';
= title;
(oSpan);
var oSpan = ('span');
= 'box3';
= price;
(oSpan);
(oP);
obj[title] = 1;
}else{
var box1 = ('box1');
var box2 = ('box2');
for(var i=0;i<;i++){
if(box2[i].innerHTML == title){
box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
};
};
};
//Total price if(!allMoney){
allMoney = ('div');
= 'allMoney';
}
iNum += parseInt(price);
= '￥'+iNum;
(allMoney);
};
};
</script>
</head>
<body>
<ul >
<li draggable="true">
<img src="img/" />
<p>javascriptLanguage essence</p>
<p>40￥</p>
</li>
<li draggable="true">
<img src="img/" />
<p>javascriptAuthoritative Guide</p>
<p>120￥</p>
</li>
<li draggable="true">
<img src="img/" />
<p>proficientjavascript</p>
<p>35￥</p>
</li>
<li draggable="true">
<img src="img/" />
<p>DOMProgramming Art</p>
<p>45￥</p>
</ul>
<div ></div>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.