js简易版购物车功能
更新时间：2017年06月17日 09:46:10 作者：yesbuy201701
这篇文章主要为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript如何操作css，帮助大家更好的进行前端开发，优化网页，感兴趣的朋友可以了解下2020-10-10
JavaScript中基本数据类型和引用数据类型是如何存储的呢？下面通过本文给大家分享js数据类型的存储方法，需要的朋友参考下吧2017-08-08
three.js和tween.js可以一起使用,实现复杂的动画效果,包括飞线动画,这篇文章主要给大家介绍了关于Threejs与Tween.js结合创建动画的相关资料,需要的朋友可以参考下2024-01-01
本文文章通过两段代码实例给大家介绍了基于javascript实现网站访问量统计代码，对js实现网站访问量统计相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要为大家详细介绍了mock.js模拟数据实现前后端分离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
很多网站在做活动时会出现一个截止时间倒计时的提示,下面这篇文章主要给大家介绍了JavaScript实现倒计时功能2种方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
今天做项目遇到这样的问题，要将获取到的时间转换为时间戳，通过查阅相关资料，问题顺利解决，下面小编把具体实现代码分享到脚本之家平台，需要的朋友参考下2017-12-12
这篇文章主要为大家详细介绍了js实现数字拼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
对于学习JavaScript的初学者来说，变量提升是绕不过去的一个知识点,简单来说变量提升就是 JS会把var变量的声明自动提升到作用域的顶部,这篇文章主要给大家介绍了关于JavaScript变量提升的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了小程序实现展开/收起的效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论