javascript详解实现购物车完整功能(附效果图，完整代码)
前言：
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
站在用户的角度思考问题，与客户深入沟通，找到红旗网站设计与红旗网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计制作、做网站、企业官网、英文网站、手机端网站、网站推广、空间域名、虚拟主机、企业邮箱。业务覆盖红旗地区。
一、基本功能
- 添加商品到购物车
- 移出购物车中的商品
- 选中某个商品，动态更新结算价格
- 商品数量的增加与减少
- 全选、反选，动态更新结算价格
二、效果图
1.首页
包含商品列表，加入购物车按钮，动态添加商品到购物车
2.添加购物车
点击按钮，实现加入购物车功能，商品移入购物车列表项
3.单选或多选商品
点击左侧选择框，选择商品，并动态更新总价
4.全选或反选
点击上方左侧按钮，实现全选，反选功能，并动态更新价格
5.删除购物车
点击右侧删除按钮，出现提示框，点击确定，删除购物车的商品，并动态更新价格
三、实现思路
1、用html实现内容
部分关键代码如下，完整代码见末尾
√
全选
商品名称
单价
数量
小计
操作
去结算
合计：0元
买购物车中商品的人还买了
2、用css修饰外观
3、用JavaScript(jq)设计动态效果。
第一步：首先是进行html页面的设计，我用一个大的div(id=box)将所有商品包含，商品列表中我用了ul li实现，接着采用克隆的方式，显示所有商品列表，具体实现代码如下
买购物车中商品的人还买了
window.onload = function() {
var aData = [{
"imgUrl": "img/03-car-01.png",
"proName": " 小米手环4 NFC版 ",
"proPrice": "229",
"proComm": "1"
},
{
"imgUrl": "img/03-car-02.png",
"proName": " Redmi AirDots真无线蓝牙耳机 ",
"proPrice": "99.9",
"proComm": "9.7"
},
{
"imgUrl": "img/03-car-03.png",
"proName": " 米家蓝牙温湿度计 ",
"proPrice": "65",
"proComm": "1.3"
},
{
"imgUrl": "img/03-car-04.png",
"proName": " 小米小爱智能闹钟 ",
"proPrice": "149",
"proComm": "1.1"
},
{
"imgUrl": "img/03-car-05.png",
"proName": "米家电子温湿度计Pro ",
"proPrice": "750",
"proComm": "0.3"
},
{
"imgUrl": "img/03-car-06.png",
"proName": " 小米手环3 NFC版 Pro ",
"proPrice": "199",
"proComm": "3.3"
},
{
"imgUrl": "img/03-car-07.png",
"proName": " 小米手环3 / 4 通用腕带",
"proPrice": "19.9",
"proComm": "1.2"
},
{
"imgUrl": "img/03-car-08.png",
"proName": " 米家温湿度传感器 ",
"proPrice": "45",
"proComm": "0.6"
},
{
"imgUrl": "img/03-car-09.png",
"proName": " 米家电子温湿度计Pro 3个装 ",
"proPrice": "207",
"proComm": "0.3"
},
{
"imgUrl": "img/03-car-10.png",
"proName": " 小米手环3 ",
"proPrice": "199",
"proComm": "7.2"
}
];
var oBox = document.getElementById("box");//商品列表所在的div
var oUl = document.getElementsByTagName("ul")[0];//商品列表所在的ul
//遍历所有商品
for (var i = 0; i < aData.length; i++) {
var oLi = document.createElement("li");
var data = aData[i];
oLi.innerHTML += '
';
oLi.innerHTML += '' + data["proName"] + '
';
oLi.innerHTML += '' + data["proPrice"] + '元
';
oLi.innerHTML += '' + data["proComm"] + '万人好评
';
oLi.innerHTML += '加入购物车';
oUl.appendChild(oLi);
}第二步：给添加购物车按钮添加事件
var aBtn = getClass(oBox, "add_btn");//获取box下的所有添加购物车按钮
var number = 0;//初始化商品数量
for (var i = 0; i < aBtn.length; i++) {
number++;
aBtn[i].index = i;
aBtn[i].onclick = function() {
var oDiv = document.createElement("div");
var data = aData[this.index];
oDiv.className = "row hid";
oDiv.innerHTML += ' √';
oDiv.innerHTML += '';
oDiv.innerHTML += '' + data["proName"] + '';
oDiv.innerHTML += '' + data["proPrice"] + '元';
oDiv.innerHTML +=' -1+ '
oDiv.innerHTML += '' + data["proPrice"] + '元'
oDiv.innerHTML += '';
oCar.appendChild(oDiv);
}
}第三步：给商品数量的增加减少的按钮添加事件
//获取所有的数量加号按钮
var i_btn = document.getElementsByClassName("count_i");
for (var k = 0; k < i_btn.length; k++) {
i_btn[k].onclick = function() {
bt = this;
//获取小计节点
at = this.parentElement.parentElement.nextElementSibling;
//获取单价节点
pt = this.parentElement.parentElement.previousElementSibling;
//获取数量值
node = bt.parentNode.childNodes[1];
console.log(node);
num = node.innerText;
num = parseInt(num);
num++;
node.innerText = num;
//获取单价
price = pt.innerText;
price = price.substring(0, price.length - 1);
//计算小计值
at.innerText = price * num + "元";
//计算总计值
getAmount();
}
}
//获取所有的数量减号按钮
var d_btn = document.getElementsByClassName("count_d");
for (k = 0; k < i_btn.length; k++) {
d_btn[k].onclick = function() {
bt = this;
//获取小计节点
at = this.parentElement.parentElement.nextElementSibling;
//获取单价节点
pt = this.parentElement.parentElement.previousElementSibling;
//获取c_num节点
node = bt.parentNode.childNodes[1];
num = node.innerText;
num = parseInt(num);
if (num > 1) {
num--;
}
node.innerText = num;
//获取单价
price = pt.innerText;
price = price.substring(0, price.length - 1);
//计算小计值
at.innerText = price * num + "元";
//计算总计值
getAmount();
}
}
第四步：删除某个商品
//获取删除按钮，并添加事件
var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
delBtn.onclick = function() {
var result = confirm("确定删除吗?");
if (result) {
oCar.removeChild(oDiv);
number--;
getAmount();
}
}第五步：全选
通过类名的添加与删除，实现选中和非选中功能
var index = false;
function checkAll() {
var choose = document.getElementById("car").getElementsByTagName("i");
// console.log(choose);
if (choose.length != 1) {
for (i = 1; i < choose.length; i++) {
if (!index) {
choose[0].classList.add("i_acity2")
choose[i].classList.add("i_acity");
} else {
choose[i].classList.remove("i_acity");
choose[0].classList.remove("i_acity2")
}
}
index = !index;
}
getAmount();
}第六步：单选
选中某个或多个商品，首先判断选中状态，然后通过类名的添加与删除，实现选中和非选中功能，
//获取选中框
var check = oDiv.firstChild.getElementsByTagName("i")[0];
check.onclick = function() {
// console.log(check.className);
if (check.className == "i_check i_acity") {
check.classList.remove("i_acity");
} else {
check.classList.add("i_acity");
}
getAmount();
}第七步：动态更新总价
//进行价格合计
function getAmount() {
//获取选中的选择框
ns = document.getElementsByClassName("i_acity");
//初始化总价
sum = 0;
//选中框
document.getElementById("price_num").innerText = sum;
for (y = 0; y < ns.length; y++) {
//小计
amount_info = ns[y].parentElement.parentElement.lastElementChild.previousElementSibling;
num = parseInt(amount_info.innerText);
sum += num;
document.getElementById("price_num").innerText = sum;
}
}四、完整代码实现
注意：图片地址请自行修改
在线演示地址：点击进入在线演示
附上下载地址，可以直接运行：点击进入下载地址
我的购物车
我的购物车
√
全选
商品名称
单价
数量
小计
操作
去结算
合计：0元
买购物车中商品的人还买了
感谢您的阅读，有什么问题或者意见欢迎您提出
本文名称：javascript详解实现购物车完整功能(附效果图，完整代码)
文章分享：http://pwwzsj.com/article/jhocgd.html
