“ 随着互联网的发展，尤其是移动互联网的快速崛起，软件技能的开拓已经越来越细分，不再是当年一种技能或者一种措辞走天下的年代，元芒数字的攻城狮们不断的努力着，下文是就购物车这个电商环节中一定会存在的案子，让我们来看攻城狮忠远的演出。”
我们肯定都很熟习商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，末了结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，末了商品总价也会随着消费者的操作随着变革，尤其是为了合营线上花样翻新的营销活动，购物车的功能必须强大而迅速。
现在，对购物车进行了大略实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知识点，同时，采取三层架构办法对购物车进行设计，对javascript的综合运用较强。
主页效果图
图1
现在读者已经对主页的效果图进行了理解，我在这里附上主页的html代码，供读者参考，建议读者根据自己的思路写代码。请看html代码：
<!DOCTYPE html>
<html>
<head>
<title>商品列表页面</title>
<!--商品列表样式表-->
<link rel=\"大众stylesheet\公众 type=\公众text/css\"大众 href=\公众../css/index.css\"大众 />
<!--cookie操作的js库-->
<script src=\公众../js/cookie.js\"大众 type=\"大众text/javascript\"大众 charset=\公众utf-8\"大众></script>
</head>
<body>
<div class=\公众container\公众>
<h1>商品列表</h1>
<div class=\"大众mycar\"大众>
<a href=\"大众cart.html\公众>我的购物车</a><i id=\"大众ccount\"大众>0</i>
</div>
<div class=\公众list\公众>
<dl pid=\"大众1001\公众>
<dt>
<img src=\公众../images/p1.jpg\公众 />
</dt>
<dd>智好手表</dd>
<dd>酷黑，棒，棒，棒，棒</dd>
<dd>￥<span>998</span></dd>
<dd>
<button>添加购物车</button>
</dd>
</dl>
<dl pid=\"大众1002\"大众>
<dt>
<img src=\"大众../images/p2.jpg\"大众 />
</dt>
<dd>智好手机001</dd>
<dd>金赤色，酷酷酷酷</dd>
<dd>￥<span>1998</span></dd>
<dd>
<button>添加购物车</button>
</dd>
</dl>
<dl pid=\"大众1003\"大众>
<dt>
<img src=\"大众../images/p3.jpg\"大众 />
</dt>
<dd>华为手机002</dd>
<dd>帅帅帅帅帅帅帅帅帅帅</dd>
<dd>￥<span>998</span></dd>
<dd>
<button>添加购物车</button>
</dd>
</dl>
<dl pid=\公众1004\"大众>
<dt>
<img src=\"大众../images/p4.jpg\"大众 />
</dt>
<dd>华为手机003</dd>
<dd>杠杠的</dd>
<dd>￥<span>2000</span></dd>
<dd>
<button>添加购物车</button>
</dd>
</dl>
</div>
</div>
<!--
描述：数据访问层，操作本地数据的模块
-->
<script type=\"大众text/javascript\"大众 src=\"大众../js/server.js\"大众></script>
<!--
描述：本页面的js操作
-->
<script type=\"大众text/javascript\"大众 src=\"大众../js/index.js\"大众></script>
</body>
</html>
html构造代码有了之后，就可以对主页进行css表现设计，这里不对css进行过多讲解。我们对主页进行设计之后，就可以进行与主页干系的DOM操作，涉及到添加按钮的点击事宜，cookie和json的运用，cookie紧张为了让当前数据与购物车进行共享，以方便操作。请看与之干系的javascript代码（这是index.js代码，紧张是主页的干系操作）：
/
思路：
第一步：获取所要操作的节点工具
第二步：当页面加载完后，须要打算本地cookie存了多少【个】商品，把个数赋值给ccount
第三步：为每一个商品对应的添加购物车按钮绑定一个点击事宜onclick
变动本地的cookie
获取当前商品的pid
循环遍历本地的cookie转换后的数组，取出每一个工具的pid进行比拟，若相等则该商品不是第一次添加
从购物车中取出该商品，然后更pCount值追加1
否则：创建一个新的工具，保存到购物中。同时该商品的数量为1
/
var ccount = document.getElementById(\公众ccount\公众); //显示商品总数量的标签节点工具
var btns = document.querySelectorAll(\"大众.list dl dd button\"大众); //所有的购物车按钮
//约定好用名称为datas的cookie来存放购物车里的数据信息 datas里所存放的便是一个json字符串
var listStr = cookieObj.get(\"大众datas\"大众);
/判断一下本地是否有一个购物车（datas），没有的话，创建一个空的购物车，有的话就直接拿来利用/
if(!listStr) { //没有购物车 datas json
cookieObj.set({
name: \"大众datas\"大众,
value: \"大众[]\"大众
});
listStr = cookieObj.get(\"大众datas\公众);
}
var listObj = JSON.parse(listStr); //数组
/循环遍历数组，获取每一个工具中的pCount值相加总和/
var totalCount = 0; //默认为0
for(var i = 0, len = listObj.length; i < len; i++) {
totalCount = listObj[i].pCount + totalCount;
}
ccount.innerHTML = totalCount;
/循环为每一个按钮添加点击事宜/
for(var i = 0, len = btns.length; i < len; i++) {
btns[i].onclick = function() {
var dl = this.parentNode.parentNode;
var pid = dl.getAttribute(\"大众pid\"大众);//获取自定义属性
var arrs = dl.children;//获取所有子节点
if(checkObjByPid(pid)) {
listObj = updateObjById(pid, 1)
} else {
var imgSrc = arrs[0].firstElementChild.src;
var pName = arrs[1].innerHTML;
var pDesc = arrs[2].innerHTML;
var price = arrs[3].firstElementChild.innerHTML;
var obj = {
pid: pid,
pImg: imgSrc,
pName: pName,
pDesc: pDesc,
price: price,
pCount: 1
};
listObj.push(obj)
listObj = updateData(listObj);
}
ccount.innerHTML = getTotalCount();
}
}
这是cookie.js的代码，紧张涉及cookie的设置获取操作，采取单例设计模式进行了封装设计，请看代码：
/
单例设计模式
完全形式：[]中是可选项
document.cookie = “name=value[;expires=date][;path=path-to-resource][;domain=域名][;secure]”
/
var cookieObj = {
/
增加或修正cookie
参数：o 工具{}
name:string cookie名
value:string cookie值
expires:Date工具 过期韶光
path:string 路径限定
domain:string 域名限定
secure:boolean true https false或undeinfed
/
set: function(o) {
var cookieStr = encodeURIComponent(o.name) + \公众=\公众 + encodeURIComponent(o.value);
if(o.expires) {
cookieStr += \"大众;expires=\"大众 + o.expires;
}
if(o.path) {
cookieStr += \"大众;path=\"大众 + o.path;
}
if(o.domain) {
cookieStr += \公众;domain=\"大众 + o.domain;
}
if(o.secure) {
cookieStr += \"大众;secure\公众;
}
document.cookie = cookieStr;
},
/
删除
参数：n string cookie的名字
/
del: function(n) {
var date = new Date();
date.setHours(-1);
//this代表的是当前函数的工具
this.set({
name: n,
expires: date
});
},
/查找/
get: function(n) {
n = encodeURIComponent(n);
var cooikeTotal = document.cookie;
var cookies = cooikeTotal.split(\"大众; \公众);
for(var i = 0, len = cookies.length; i < len; i++) {
var arr = cookies[i].split(\公众=\公众);
if(n == arr[0]) {
return decodeURIComponent(arr[1]);
}
}
}
}
下面的是server.js代码，紧张对购物车中各种操作进行了封装，比如商品个数统计，更新获取本地数据等操作，方便代码管理，请看代码：
/
功能：查看本地数据中是否含有指定的工具（商品），根据id
参数：id：商品的标识
/
function checkObjByPid(id) {
var jsonStr = cookieObj.get(\"大众datas\"大众);
var jsonObj = JSON.parse(jsonStr);
var isExist = false;
for(var i = 0, len = jsonObj.length; i < len; i++) {
if(jsonObj[i].pid == id) {
isExist = true;
break;
}
}
return isExist; //return false;
}
/
功能：更新本地数据
参数：arr 数组工具
返回一个值：最新确当地转换后的数组工具
/
function updateData(arr) {
var jsonStr = JSON.stringify(arr);
cookieObj.set({
name: \"大众datas\"大众,
value: jsonStr
});
jsonStr = cookieObj.get(\"大众datas\"大众);
return JSON.parse(jsonStr);
}
/
获取商品的总数量
返回：数字
/
function getTotalCount() {
/循环遍历数组，获取每一个工具中的pCount值相加总和/
var totalCount = 0; //默认为0
var jsonStr = cookieObj.get(\"大众datas\"大众);
var listObj = JSON.parse(jsonStr);
for(var i = 0, len = listObj.length; i < len; i++) {
totalCount = listObj[i].pCount + totalCount;
}
return totalCount;
}
/
更新本地数据根据pid
id:商品的标识
/
function updateObjById(id, num) {
var jsonStr = cookieObj.get(\"大众datas\"大众);
var listObj = JSON.parse(jsonStr);
for(var i = 0, len = listObj.length; i < len; i++) {
if(listObj[i].pid == id) {
listObj[i].pCount = listObj[i].pCount + num;
break;
}
}
return updateData(listObj)
}
/
获取本地数据
返回 数组工具
/
function getAllData() {
var jsonStr = cookieObj.get(\"大众datas\"大众);
var listObj = JSON.parse(jsonStr);
return listObj;
}
function deleteObjByPid(id) {
var lisObj = getAllData();
for(var i = 0, len = lisObj.length; i < len; i++) {
if(lisObj[i].pid == id) {
lisObj.splice(i, 1);
break;
}
}
updateData(lisObj);
return lisObj;
}
由于上述代码中涉及了进入购物车后的一些操作，读者看了之后可能会感到迷惑，不用担心，下面请看点击进入我的购物车之后的剖析。请看效果图：
图2
笔者在主页中点击了三种商品，共点击了七次，在购物车中涌现了相应商品以及价格打算。对付途中的各种信息，相信读者一览无余。请看本购物车的html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=\公众UTF-8\公众>
<title>购物车</title>
<!--购物车样式表-->
<link rel=\公众stylesheet\公众 type=\"大众text/css\"大众 href=\"大众../css/cart.css\公众 />
<!--操作cookie的js文件-->
<script type=\"大众text/javascript\公众 src=\"大众../js/cookie.js\"大众></script>
</head>
<body>
<div class=\公众container\"大众>
<h1>购物车</h1>
<h3><a href=\"大众index.html\"大众>返回商品列表页面</a></h3>
<table id=\"大众table\公众 border=\公众1\"大众 cellspacing=\"大众0\"大众 cellpadding=\公众0\公众 class=\"大众hide\"大众>
<thead>
<tr>
<th>
<input type=\"大众checkbox\"大众 id=\"大众allCheck\"大众 class=\"大众ck\公众 />全选
</th>
<th>
图片
</th>
<th>
描述
</th>
<th>
数量
</th>
<th>
单价
</th>
<th>
小计
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id=\"大众tbody\"大众>
<!--
<tr>
<td>
<input type=\"大众checkbox\"大众 class=\"大众ck\"大众 />
</td>
<td>
<img src=\"大众../images/p1.jpg\"大众 alt=\"大众\"大众 />
</td>
<td>
酷黑，棒棒棒棒
</td>
<td>
<button class=\公众down\"大众>-</button><input type=\"大众text\"大众 value=\"大众1\公众 readonly=\公众readonly\"大众 /><button class=\公众up\"大众>+</button>
</td>
<td>
￥<span>111</span>
</td>
<td>
￥<span>111</span>
</td>
<td>
<button class=\"大众del\公众 >删除</button>
</td>
</tr>
-->
</tbody>
</table>
<div class=\公众box\"大众 id=\"大众box\"大众>购物车里没有任何商品</div>
<h2 id=\公众h2\"大众 class=\"大众\"大众>总价格：￥<span id=\"大众totalPrice\"大众>0</span></h2>
</div>
<script src=\公众../js/server.js\公众 type=\公众text/javascript\"大众 charset=\公众utf-8\公众></script>
<!--操作购物车页面的cart.js-->
<script src=\公众../js/cart.js\"大众></script>
</body>
</html>
在对购物车进行干系的表现设计之后，既要进行javascript行为设计，请看与本页干系的cart.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>' +
'<input type=\"大众checkbox\"大众 class=\"大众ck\公众 />' +
'</td>' +
'<td>' +
'<img src=\"大众' + listObj[i].pImg + '\公众 alt=\"大众\公众 />' +
'</td>' +
'<td>' +
listObj[i].pDesc +
'</td>' +
'<td>' +
'<button class=\"大众down\"大众>-</button><input type=\公众text\"大众 value=\公众' + listObj[i].pCount + '\公众 readonly=\"大众readonly\"大众 /><button class=\公众up\公众>+</button>' +
'</td>' +
'<td>' +
'￥<span>' + listObj[i].price + '</span>' +
'</td>' +
'<td>' +
'￥<span>' + listObj[i].price listObj[i].pCount + '</span>' +
'</td>' +
'<td>' +
'<button class=\公众del\"大众 >删除</button>' +
'</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等进行了综合运用。
本示例中涉及的大部分代码都在本页中贴出，对付没展示的部分，大家可以关注我们之后，在"大众年夜众号小窗索取。本示例采取HBuilder编译器编译运行，涉及cookie操作，请读者自行安装做事器或者添加到HBuilder中运行查看。
