js简易版购物车功能
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
这篇文章主要为大家分享了js简易版的购物车，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js购物车功能的具体代码，供大家参考，具体内容如下
<!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>
window.onload = function() {
var oList = document.getElementById('list');
var aLi = oList.getElementsByTagName('li');
var oBus = document.getElementById('bus');
var obj = {};
var iNum = 0;
var allMoney = 0;
for (var i = 0; i < aLi.length; i++) {
aLi[i].ondragstart = function(ev) {
//点击拖拽元素的时候，就设置数据，以后放到购物车的时候数据就可以传过去了
var ev = ev || window.event;
var aP = this.getElementsByTagName('p');
ev.dataTransfer.setData('title', aP[0].innerHTML);
ev.dataTransfer.setData('price', aP[1].innerHTML);
ev.dataTransfer.setDragImage(this, 0, 0);
}
}
oBus.ondragover = function(ev) {
//阻止鼠标默认事件
var ev = ev || event;
ev.preventDefault();
};
oBus.ondrop = function(ev) {
var ev = ev || event;
var title = ev.dataTransfer.getData('title');
var price = ev.dataTransfer.getData('price');
if(!obj[title]){
var oP = document.createElement('p');
var oSpan = document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = 1;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = title;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML = price;
oP.appendChild(oSpan);
oBus.appendChild(oP);
obj[title] = 1;
}else{
var box1 = document.getElementsByClassName('box1');
var box2 = document.getElementsByClassName('box2');
for(var i=0;i<box2.length;i++){
if(box2[i].innerHTML == title){
box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
};
};
};
//总价
if(!allMoney){
allMoney = document.createElement('div');
allMoney.id = 'allMoney';
}
iNum += parseInt(price);
allMoney.innerHTML = '￥'+iNum;
oBus.appendChild(allMoney);
};
};
</script>
</head>
<body>
<ul id="list">
<li draggable="true">
<img src="img/img1.jpg" />
<p>javascript语言精粹</p>
<p>40￥</p>
</li>
<li draggable="true">
<img src="img/img2.jpg" />
<p>javascript权威指南</p>
<p>120￥</p>
</li>
<li draggable="true">
<img src="img/img3.jpg" />
<p>精通javascript</p>
<p>35￥</p>
</li>
<li draggable="true">
<img src="img/img4.jpg" />
<p>DOM编程艺术</p>
<p>45￥</p>
</ul>
<div id="bus"></div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。