js购物车功能php,javascript实现简易版购物车功能

这篇文章主要为大家分享了js简易版的购物车，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js购物车功能的具体代码，供大家参考，具体内容如下

* {

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;

}

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

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);

};

};

• 

  javascript语言精粹

  40￥

• 

  javascript权威指南

  120￥

• 

  精通javascript

  35￥

• 

  DOM编程艺术

  45￥

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