Javascript实现购物车功能的详细代码
我们肯定都很熟悉商品购物车这⼀功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加⼊购物车中，最后结算。购物车这⼀功能，⽅便消费者对商品进⾏管理，可以添加商品，删除商品，选中购物车中的某⼀项或⼏项商品，最后商品总价也会随着消费者的操作随着变化。
现在，笔者对购物车进⾏了简单实现，能够实现真实购物车当中的⼤部分功能。在本⽰例当中，⽤到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知识点，同时，采⽤三层架构⽅式对购物车进⾏设计，对javascript的综合应⽤较强，对javascript初学者进阶有⼀定的益处。
请看主页效果图：
现在读者已经对主页的效果图进⾏了了解，我在这⾥附上主页的html代码，供读者参考，建议读者根据⾃⼰的思路写代码。
请看html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>商品列表页⾯</title>
<!--商品列表样式表-->
<link rel="stylesheet" type="text/css" href="../css/index.css" rel="external nofollow" />
<!--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" rel="external nofollow" >我的购物车</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" />
<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 = ElementById("ccount"); //显⽰商品总数量的标签节点对象
var btns = document.querySelectorAll(".list dl dd button"); //所有的购物车按钮
//约定好⽤名称为datas的cookie来存放购物车⾥的数据信息 datas⾥所存放的就是⼀个json字符串
var listStr = ("datas");
/*判断⼀下本地是否有⼀个购物车（datas），没有的话，创建⼀个空的购物车，有的话就直接拿来使⽤*/
if(!listStr) { //没有购物车 datas json
cookieObj.set({
name: "datas",
value: "[]"
});
listStr = ("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;
pid: pid,
pImg: imgSrc,
pName: pName,
pDesc: pDesc,
price: price,
pCount: 1
};
listObj.push(obj)
listObj = updateData(listObj);
}
ccount.innerHTML = getTotalCount();
}
}
这是cookie.js的代码，主要涉及cookie的设置获取操作，采⽤单例设计模式进⾏了封装设计，请看代码：/*
单例设计模式
完整形式：[]中是可选项
*/
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);
pires) {
cookieStr += ";expires=" + o.expires;
}
if(o.path) {
cookieStr += ";path=" + o.path;
}
if(o.domain) {
cookieStr += ";domain=" + o.domain;
}
if(o.secure) {
cookieStr += ";secure";
}
},
/*
删除
参数：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 = kie;
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 = ("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 = ("datas");
return JSON.parse(jsonStr);
}
/*
获取商品的总数量
返回：数字
*/
function getTotalCount() {
/*循环遍历数组，获取每⼀个对象中的pCount值相加总和*/
var totalCount = 0; //默认为0
var jsonStr = ("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 = ("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 = ("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;
}
因为上述代码中涉及了进⼊购物车后的⼀些操作，读者看了之后可能会感动疑惑，不⽤担⼼，下⾯请看点击进⼊我的购物车之后的分析。
请看效果图：
笔者在主页中点击了三种商品，共点击了七次，在购物车中出现了相应商品以及价格计算。对于途中的各种信息，相信读者⼀⽬了然。请看本购物车的html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<!--购物车样式表-->
<link rel="stylesheet" type="text/css" href="../css/cart.css" rel="external nofollow" />
<!--操作cookie的js⽂件-->
<script type="text/javascript" src="../js/cookie.js"></script>
</head>
<body>
<div class="container">
<h1>购物车</h1>
<h3><a href="index.html" rel="external nofollow" >返回商品列表页⾯</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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论