js购物车功能php,使用JS实现购物车功能步骤详解

这次给大家带来使用JS实现购物车功能步骤详解，使用JS实现购物车功能的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

请看主页效果图：

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

请看html代码：

商品列表页面

商品列表

我的购物车0

智能手表酷黑，棒，棒，棒，棒￥ 998

添加购物车

智能手机001金红色，酷酷酷酷￥ 1998

添加购物车

华为手机002帅帅帅帅帅帅帅帅帅帅￥ 998

添加购物车

华为手机003杠杠的￥ 2000

添加购物车

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() {