javascript实现简易版购物车功能

来源：动视网责编：小OO 时间：2020-11-27 20:18:15

javascript实现简易版购物车功能

本文实例为大家分享了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；<。

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了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；<。

这篇文章主要为大家分享了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('p');
 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>
 <p id="bus"></p>
 </body>

</html>

javascript实现简易版购物车功能

推荐度：

点击下载本文 文档为doc格式

标签：功能简易购物车

热门焦点

javascript实现简易版购物车功能

javascript实现简易版购物车功能

javascript实现简易版购物车功能

最新推荐

猜你喜欢

热门推荐