全国服务热线:4008-888-888

公司新闻

为何门店要用小程序_js简易版购物车功用

js简易版购物车功能       这篇文章主要为大家分享了js简易版的购物车,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服