Heim >Web-Frontend >js-Tutorial >Verwenden Sie js, um eine einfache Warenkorbfunktion zu implementieren
Dieser Artikel teilt Ihnen hauptsächlich die einfache js-Version des Warenkorbs mit, die einen bestimmten Referenzwert hat. Interessierte Freunde können darauf verweisen
Das Beispiel in diesem Artikel teilt Ihnen die js-Warenkorbfunktion mit. Der spezifische Code dient als Referenz. Der spezifische Inhalt lautet wie folgt:
<!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>
Das obige ist der detaillierte Inhalt vonVerwenden Sie js, um eine einfache Warenkorbfunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!