Javascript实现购物车功能的详细代码

我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。

现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知识点，同时，采用三层架构方式对购物车进行设计，对javascript的综合应用较强，对javascript初学者进阶有一定的益处。

请看主页效果图：

现在读者已经对主页的效果图进行了了解，我在这里附上主页的HTML代码，供读者参考，建议读者根据自己的思路写代码。

请看HTML代码：

rush:xhtml;"> 商品<a href="https://www.jb51.cc/tag/liebiaoye/" target="_blank" class="keywords">列表页</a>面

购物车

返回商品列表页面

全选 Box" id="Box">购物车里没有任何商品

在对购物车进行相关的表现设计之后，既要进行javascript行为设计，请看与本页相关的cart.js代码：

rush:js;"> /* 思路：第一步：当页面加载完后，根据本地的数据，动态生成表格（购物车列表）获取所要操作的节点对象判断购物车中是否有数据？有：显示出购物列表没有：提示购物车为空第二步：当购物车列表动态生成后，获取tbody里所有的checkeBox 标签节点对象，看那个被选中就获取对应行小计进行总价格运算。第三步：为每一个checkBox 添加一个onchange事件，根据操作更改总价格第四步：全选第五步：为加减按钮添加一个鼠标点击事件更改该商品的数量第六步：删除获取所有的删除按钮为删除按钮添加一个鼠标点击事件删除当前行，并更新本地数据 */

var listObj = getAllData();
var table = document.getElementById("table")
var Box = document.getElementById("Box")
var tbody = document.getElementById("tbody");
var totalPrice = document.getElementById("totalPrice");
var allCheck = document.getElementById("allCheck");

if(listObj.length == 0) { //购物车为空
Box.className = "Box";
table.className = "hide";
} else {
Box.className = "Box hide";
table.className = "";
for(var i = 0,len = listObj.length; i < len; i++) {
var tr = document.createElement("tr");
tr.setAttribute("pid",listObj[i].pid);
//{"pid":值,"pImg":值,"pName":值,"pDesc":值,"price":值,"pCount":1},tr.innerHTML = '<td>' +
'' +
'</td>' +
'<td>' +
'' +
'</td>' +
'<td>' +
listObj[i].pDesc +
'</td>' +
'<td>' +
'<button class="down">-<button class="up">+' +
'</td>' +
'<td>' +
'￥' + listObj[i].price + '' +
'</td>' +
'<td>' +
'￥' + listObj[i].price * listObj[i].pCount + '' +
'</td>' +
'<td>' +
'' +
'</td>';
tbody.appendChild(tr);
}
}

/
功能：计算总价格
/
var cks = document.querySelectorAll("tbody .ck");
function getTotalPrice() {
cks = document.querySelectorAll("tbody .ck");
var sum = 0;
for(var i = 0,len = cks.length; i < len; i++) {
if(cks[i].checked) { //如果当前被选中
var tr = cks[i].parentNode.parentNode;
var temp = tr.children[5].firstElementChild.innerHTML;
sum = Number(temp) + sum;
}
}
return sum;
}
/循环遍历为每一个checkBox 添加一个onchange事件/
for(var i = 0,len = cks.length; i < len; i++) {
cks[i].onchange = function() {
checkAllChecked();
totalPrice.innerHTML = getTotalPrice();
}
}

/全选实现/
allCheck.onchange = function() {
if(this.checked) {
for(var i = 0,len = cks.length; i < len; i++) {
cks[i].checked = true;
}
} else {
for(var i = 0,len = cks.length; i < len; i++) {
cks[i].checked = false;
}
}
totalPrice.innerHTML = getTotalPrice();
}

var downs = document.querySelectorAll(".down"); //一组减的按钮
var ups = document.querySelectorAll(".up"); //一组加的按钮
var dels = document.querySelectorAll(".del"); //一组删除按钮
for(var i = 0,len = downs.length; i < len; i++) {
downs[i].onclick = function() {
var txtObj = this.nextElementSibling;//下一个兄弟节点
var tr = this.parentNode.parentNode;
var pid = tr.getAttribute("pid");
txtObj.value = txtObj.value - 1;
if(txtObj.value < 1) {
txtObj.value = 1;
updateObjById(pid,0)
} else {
updateObjById(pid,-1)
}
tr.children[0].firstElementChild.checked = true;
checkAllChecked();
var price = tr.children[4].firstElementChild.innerHTML;
tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
totalPrice.innerHTML = getTotalPrice();

}

ups[i].onclick = function() {
var txtObj = this.prevIoUsElementSibling;//上一个兄弟节点
var tr = this.parentNode.parentNode;
var pid = tr.getAttribute("pid");
txtObj.value = Number(txtObj.value) + 1;
updateObjById(pid,1)
tr.children[0].firstElementChild.checked = true;
checkAllChecked()
var price = tr.children[4].firstElementChild.innerHTML;
tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
totalPrice.innerHTML = getTotalPrice();
}

dels[i].onclick = function() {
var tr = this.parentNode.parentNode;
var pid = tr.getAttribute("pid")
if(confirm("确定删除？")) {
//remove() 自杀
tr.remove();
listObj = deleteObjByPid(pid);
}
if(listObj.length == 0) { //购物车为空
Box.className = "Box";
table.className = "hide";
} else {
Box.className = "Box hide";
table.className = "";
}
totalPrice.innerHTML = getTotalPrice();
}
}

/检测是否要全选/
function checkAllChecked() {
var isSelected = true; //全选是否会选中
for(var j = 0,len = cks.length; j < len; j++) {
if(cks[j].checked == false) {
isSelected = false;
break;
}
}
allCheck.checked = isSelected;
}

上述代码完成了购物车中的相关操作，比如价格计算，商品数量更换，商品删除等操作。

到这里我们已经完成了购物车的大部分功能，我们对html，css,BOM,DOM,json,cookie等进行了综合应用，相信读者理解之后一定会对自己的javascript学习更进一步，本示例中涉及的大部分代码都在本页中贴出，部分代码资源未向读者展示，读者可以点击下面的资源链接，下载本示例的全部代码及图片资料。本示例采用HBuilder编译器编译运行，涉及cookie操作，请读者自行安装服务器或者添加到HBuilder中运行查看。

资源链接：

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

原文地址：https://www.jb51.cc/js/32461.html

js js实现购物车代码 js实现购物车功能购物车购物车