html保存按钮代码_分享｜Javascript购物车实现详细代码讲解
元芒数字
“ 随着互联⽹的发展，尤其是移动互联⽹的快速崛起，软件技术的开发已经越来越细分，不再是当年⼀种
技术或者⼀种语⾔⾛天下的年代，元芒数字的攻城狮们不断的努⼒着，下⽂是就购物车这个电商环节中⼀定会存在的案⼦，让我们来看攻城狮忠远的表演。”
我们肯定都很熟悉商品购物车这⼀功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加⼊购物车中，最后结算。购物车这⼀功能，⽅便消费者对商品进⾏管理，可以添加商品，删除商品，选中购物车中的某⼀项或⼏项商品，最后商品总价也会随着消费者的操作随着变化，尤其是为了配合线上花样翻新的营销活动，购物车的功能必须强⼤⽽迅速。
现在，对购物车进⾏了简单实现，能够实现真实购物车当中的⼤部分功能。在本⽰例当中，⽤到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知识点，同时，采⽤三层架构⽅式对购物车进⾏设计，对javascript的综合应⽤较强。
主页效果图
图1
现在读者已经对主页的效果图进⾏了了解，我在这⾥附上主页的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 = 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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。