简单的购物车和购物车结算
来源：互联网 发布：coc熔岩猎犬升级数据 编辑：程序博客网 时间：2024/04/28 02:09
购买部分
HTML部分
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>加入购物车</title> <link rel="stylesheet" type="text/css" href="../css/reset.css" /> <link rel="stylesheet" type="text/css" href="../css/JD.css" /> <script type="text/javascript" src="../js/cookies.js"></script> <script type="text/javascript" src="../js/JD.js"></script> </head> <body> <div id="aside-cart"> <span> <img src="../img/cart.png" />购物车 </span> </div> <div id="goods" class="clear"> <dl data-id="id01"> <dt> <img src="../img/1.jpg" /> </dt> <dd> <strong>¥259.00</strong> <p>春款真皮坡跟大码单鞋内...</p> <button>加入购物车</button> </dd> </dl> <dl data-id="id02"> <dt> <img src="../img/2.jpg" /> </dt> <dd> <strong>¥289.00</strong> <p>春款真皮坡跟大码单鞋内...</p> <button>加入购物车</button> </dd> </dl> <dl data-id="id03"> <dt> <img src="../img/3.jpg" /> </dt> <dd> <strong>¥299.00</strong> <p>春款真皮坡跟大码单鞋内...</p> <button>加入购物车</button> </dd> </dl> <dl data-id="id04"> <dt> <img src="../img/4.jpg" /> </dt> <dd> <strong>¥309.00</strong> <p>春款真皮坡跟大码单鞋内...</p> <button>加入购物车</button> </dd> </dl> </div> </body></html>CSS部分
@charset "utf-8";/*body,html{ height:100% ;}*/#goods{ width: 820px; margin: 100px auto;}#goods dl{ height: 376px; width: 180px; border: solid 1px #e0e0e0; padding: 10px 9px 8px 9px; float: left; margin-right: 5px;}#goods dl dt { height: 239px; width: 180px;}#goods dl dd strong{ display: block; height: 61px; line-height: 61px; font-size: 16px; color: #ff3300; text-align: center; font-weight: 900;}#goods dl dd p{ height: 27px; line-height: 27px; font-size: 14px; text-align: center;}#goods dl dd button{ width: 144px; height: 39px; line-height: 39px; text-align: center; background: #f99c1b; color: #fef4e9; outline: none; border: solid 1px #da7c0c; border-radius: 5px; margin:6px 0 0 17px; font-size: 16px;}#aside-cart{ position: fixed; top: 0; right: 0; width:35px; height: 100%; background: #000000; color: #FFFFFF; text-align: center; padding: 200px 0 0 0; cursor: pointer;}#aside-cart span{ display: block; font-size: 20px;}#aside-cart span img{ display: block;}js部分
window.onload = function(){ var addBtns = document.getElementsByTagName('button'); //加入购物车按钮 var goods = $('goods'); //商品列表的外围div，用于事件委托 var asideCart = $('aside-cart'); //右侧侧边栏//==================================鼠标按下加入购物车=========================== goods.onmousedown = function(evt){ //鼠标按下加入购物车,事件委托 var e = evt || window.event; var target = e.target || e.srcElement; addCookie(target); // 添加商品信息到cookie中，addCookie()是封装的方法 while(target != null){ //判断真实发生事件的对象 if(target.nodeName.toLowerCase() == 'button'){ target.style.backgroundColor = '#f06015'; break; } target = target.parentNode; } goods.onmouseup = function(){ //鼠标抬起,事件委托 var e = evt || window.event; var target = e.target || e.srcElement; while(target != null){ if(target.nodeName.toLowerCase() == 'button'){ target.style.backgroundColor = '#f99c1b'; } target = target.parentNode; } } };//==================================点击购物车结算================================== asideCart.onclick = function(){ location.href = 'JD Cart.html'; };}; //window.onload结束//==================================向cookie中添加商品信息==========================function addCookie(target){ var parent = target.parentNode.parentNode; //dl节点 var goodsMessage = [{ //用于保存商品信息 id:parent.getAttribute('data-id'), imgSrc:parent.getElementsByTagName('img')[0].src, price:parent.getElementsByTagName('strong')[0].innerHTML, description:parent.getElementsByTagName('p')[0].innerHTML, count:1 }]; var cookie = getCookie('myCart'); //获取在cookie中mycart的内容 console.log(JSON.parse(cookie)); var savedValue; //用于保存最后存在cookie中的内容 if(cookie){ //如果cookie中存在获取在cookie中mycart的内容 if(judgeCookieCount(goodsMessage[0])){ //判断当前将要加入cookie中的内容在cookie中是否已经存在 var arrCookies = JSON.parse(cookie); //如果存在，获取在cookie中mycart的内容，通过JSON.parse()转化为数组arrCookies for(var i = 0; i < arrCookies.length;i ++){ //将arrCookies[i]中与goodsMessage内容相同的count+1 if(arrCookies[i].id == goodsMessage[0].id){ arrCookies[i].count += 1; } } savedValue = arrCookies; //将更改后的arrCookies赋值给savedValue }else if(goodsMessage[0].id){ savedValue = goodsMessage.concat(JSON.parse(cookie)); //将新添加的内容（数组）与保存在cookie中的内容（转换为数组的内容）拼接 } }else{ //如果cookie中不存在获取在cookie中mycart的内容 savedValue = goodsMessage; } setCookie('myCart',JSON.stringify(savedValue)); //将savedValue的信息存储到cookie中，setCookie是封装的用于设置cookie的方法}//==================================cookie中是否存在相同的商品信息==========================function judgeCookieCount(goodsMessage){ var arrCookies = JSON.parse(getCookie('myCart')); //获取在cookie中mycart的内容 for(var i = 0; i < arrCookies.length;i ++){ if(arrCookies[i].id == goodsMessage.id){ return true; } } return false;}共用的js部分
//==================================设置bookie通用方法==========================function setCookie(name,value,expires){ document.cookie = name + '=' + value; if(expires){ var newTime = new Date(); time = newTime.getTime() + expires*1000; newTime.setTime(time); document.cookie += ";expires="+newTime; //cookie的过期时间设置需要为标准时间 }}//==================================获取cookie通用方法==========================function getCookie(name){ var cookie = document.cookie; var arr = cookie.split(' ;'); var obj = []; for(var i = 0; i < arr.length; i++){ var arrPart = arr[i].split('='); if(arrPart[0] == name){ return decodeURIComponent(arrPart[1]); } } return false;}//==================================获取id名节点通用方法==========================function $(id){ return document.getElementById(id);}结算页面
HTML部分
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>购物车结算</title> <link rel="stylesheet" type="text/css" href="../css/reset.css" /> <link rel="stylesheet" type="text/css" href="../css/JD Cart.css" /> <script type="text/javascript" src="../js/cookies.js"></script> <script type="text/javascript" src="../js/JD Cart.js"></script> </head> <body> <div id="header"> <ul class="clear"> <li class="header-cb"> <!--所有商品全选--> <input type="checkbox" id="selectAll" /> <label for = 'selectAll'></label> 全选 </li> <li class="header-mes"> 商品信息 </li> <li class="header-args"> 商品参数 </li> <li class="header-price"> 单价 </li> <li class="header-count"> 数量 </li> <li class="header-sum"> 金额 </li> <li class="header-action"> 操作 </li> </ul> </div> <div id="main"> <!-- <div class="shops-box"> 用于预先设置商品列表的结构和样式 <div class="shops-name"> <!-店铺商品商品全选-> <input type="checkbox" id="selectShopAll" /> <lable for = 'selectShopAll'></lable> <span>店铺：</span> 搜猎人艺术生活 </div> <div class="shops-goods"> <ul class="clear"> <li class="shops-goods-chk"> <input type="checkbox" id="" /> <label for="1"></label> </li> <li class="shops-goods-mes"> <div class="goods-img"> <a href="#"> <img src="../img/1.jpg" /> </a> </div> <div class="goods-text"> <a href="#"> 商品信息 </a> </div> </li> <li class="goods-arg"> 商品参数 </li> <li class="goods-price"> 商品单价 </li> <li class="goods-count"> <a href="#" class="subt">-</a> <input type="text" value=" " /> <a href="#" class="addt">+</a> </li> <li class="goods-sum"> ￥980 </li> <li class="goods-remove"> <span>移除商品</span> </li> </ul> </div> </div>--> </div> <div id="footer"> <div class="footer-right"> <div id="allCount"> 已选商品<span>0</span>件 </div> <div id="allSum"> 共计：<span>￥0</span> </div> <div id="goBuy"> 结算 </div> </div> </div> </body></html>CSS部分
@charset "utf-8";#header{ width: 1200px; height: 52px; margin: 100px auto 0; /*border: solid 1px #CCCCCC;*/ overflow: hidden;}#header ul li{ float: left;}#header ul .header-cb{ width: 87px; height: 52px; position: relative; text-align: center; line-height: 52px;}#header ul .header-cb input[type='checkbox']{ position: absolute; z-index: 0; left: -20px; top: -20px;}#header ul .header-cb label{ position: absolute; height: 12px; width: 12px; border: solid 1px #b8b8b8; top: 19px; left: 10px;}#header ul .header-mes{ width: 187px; height: 52px; line-height: 52px; padding-left: 132px;}#header ul .header-args{ width: 237px; height: 52px; line-height: 52px;}#header ul .header-price{ width: 130px; height: 52px; line-height: 52px;}#header ul .header-count{ width: 120px; height: 52px; line-height: 52px;}#header ul .header-sum{ width: 140px; height: 52px; line-height: 52px;}#header ul .header-action{ width: 167px; height: 52px; line-height: 52px;}#main{ width: 1200px; margin: 0 auto 120px;}/***********************添加的商品样式************************/.shops-box{ width: 1200px;}.shops-box .shops-name{ height: 36px; line-height: 36px; position: relative; overflow: hidden; padding-left: 29px;}.shops-box .shops-name input[type='checkbox']{ position: absolute; z-index: 0; left: -20px; top: -20px;}.shops-box .shops-name label{ position: absolute; height: 12px; width: 12px; border: solid 1px #b8b8b8; top: 11px; left: 10px;}.shops-box .shops-goods{ border: solid 1px #b8b8b8;}.shops-box .shops-goods ul{ width: 1198px; border-bottom: solid 1px #e7e7e7;}.shops-box .shops-goods ul li{ float: left;}.shops-box .shops-goods ul .shops-goods-chk{ width: 58px; height: 130px; position: relative; overflow: hidden;}.shops-box .shops-goods ul .shops-goods-chk input[type='checkbox']{ position: absolute; z-index: 0; left: -20px; top: -20px;}.shops-box .shops-goods ul .shops-goods-chk label{ position: absolute; height: 12px; width: 12px; border: solid 1px #b8b8b8; top: 21px; left: 24px;}.shops-box .shops-goods ul .shops-goods-mes{ width: 300px; height: 130px; margin-right: 36px;}.shops-box .shops-goods ul .shops-goods-mes .goods-img{ width:80px; height: 130px; float: left;}.shops-box .shops-goods ul .shops-goods-mes img{ width: 80px; height: 80px; margin-top: 24px;}.shops-box .shops-goods ul .shops-goods-mes .goods-text{ width: 196px; height: 82px; float: left; padding:24px 12px;}.shops-box .shops-goods ul .goods-arg{ height: 82px; width: 214px; color: #9c9c9c; padding:24px 12px;}.shops-box .shops-goods ul .goods-price{ width: 106px; height: 82px; padding:24px 12px; font-weight: 900; font-size: 14px;}.shops-box .shops-goods ul .goods-count{ width: 96px; height: 82px; padding:24px 12px;}.shops-box .shops-goods ul .goods-count a{ width: 17px; height: 23px; border: solid 1px #e5e5e5; background: #f0f0f0; float: left; text-align: center; line-height: 23px; cursor: pointer;}.shops-box .shops-goods ul .goods-count .subt{ border-right-width: 0;} .shops-box .shops-goods ul .goods-count .addt{ border-left-width: 0;}.shops-box .shops-goods ul .goods-count input[type='text']{ float: left; height: 23px; width: 39px; border: solid 1px #aaaaaa; outline: none; text-align: center}.shops-box .shops-goods ul .goods-sum{ width: 115px; height: 82px; padding:24px 12px; color: #ff0000; font-weight: 900;}.shops-box .shops-goods ul .goods-remove{ width: 153px; height: 82px; padding:24px 12px;}.shops-box .shops-goods ul .goods-remove span{ cursor: pointer;}/*=============footer=============*/#footer{ width: 1200px; height: 50px; margin: 0 auto; background: #e5e5e5; position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto;}#footer .footer-right{ float: right; width: 389px;}#footer .footer-right #allCount{ width: 137px; height: 50px; line-height: 50px; text-align: center; color: #3c3c3c; float: left;}#footer .footer-right #allCount span{ color: #ff4400; margin: 0 12px; font-weight: 900;}#footer .footer-right #allSum{ width: 132px; height: 50px; line-height: 50px; text-align: center; color: #3c3c3c; float: left;}#footer .footer-right #allSum span{ color: #ff4400; margin: 0 12px; font-weight: 900;}#footer .footer-right #goBuy{ color: #FFFFFF; font-size: 22px; background: #ff4400; float: left; width: 120px; height: 50px; line-height: 50px; text-align: center; border-radius: 2px;}.mark{ background:url(../img/mark1.png) no-repeat center center;}js部分
window.onload = function(){ var cookies = JSON.parse(getCookie('myCart')); console.log(cookies); creatShopBox(); //创建商铺和商品列表 var main = $('main'); var shopGoodsWrap = document.getElementsByClassName('shops-goods-wrap')[0]; //获取商品列表容器节点，用于事件委托 var allCount = $('allCount'); //获得商品总数（节点） var allSum = $('allSum'); //获得商品总价（节点） //点击全选选择框事件 var selectAll = $('selectAll'); //获取id名为selectAll(全选)节点 selectAll.onclick = function(){ if(this.checked == true){ checkAll(this); //checkAll为封装的方法 this.parentNode.children[1].className = 'mark'; }else{ checkAll(this); this.parentNode.children[1].removeAttribute('class'); } }; //点击商铺选择框事件 var shopsNameSelectbox = $('selectShopAll'); shopsNameSelectbox.onclick = function(e){ if(this.checked == true){ selectShopAllBox(this); //selectShopAllBox()为封装的方法 this.parentNode.children[1].className = 'mark'; }else{ selectShopAllBox(this); this.parentNode.children[1].removeAttribute('class'); } }; //商铺内商品列表内的商品选择框被选中或者点击加号和加号的事件 shopGoodsWrap.onclick =function(evt){ //事件委托 var e = evt || window.event; var target = e.target || e.srcElement; var allSumValue = parseFloat(allSum.children[0].innerHTML.substring(1)); //商品总价 var allCountValue = parseFloat(allCount.children[0].innerHTML); //商品总数 while(target != null){ //寻找真正发生事件的对象 //选中减号 if(target.nodeName.toLowerCase() == 'a' && target.innerHTML == '-'){ var Dprice = parseFloat(target.parentNode.parentNode.children[3].innerHTML.substring(1)); //获得当前事件的商品列表的单价 if(parseInt(target.parentNode.children[1].value) > 1){ //如果当前商品数量大于1 target.parentNode.children[1].value = parseInt(target.parentNode.children[1].value) - 1; //当前商品数量-1 target.parentNode.parentNode.children[5].innerHTML = '￥' + ((parseInt(target.parentNode.children[1].value)*Dprice).toFixed(2)); //商品列表项总额更新 if(target.parentNode.parentNode.children[0].children[0].checked == true){ //判断当前事件的商品列表选择框是否被选中// if(parseInt(target.parentNode.children[1].value) >= 1){ allCount.children[0].innerHTML = parseFloat(allCount.children[0].innerHTML)-1; //更新商品总数 allSum.children[0].innerHTML = '￥' + (parseFloat(allSum.children[0].innerHTML.substring(1)) - Dprice); //更新商品总价格 } } } break; } //选中加号 else if(target.nodeName.toLowerCase() == 'a' && target.innerHTML == '+'){ var Dprice = parseFloat(target.parentNode.parentNode.children[3].innerHTML.substring(1)); //商品单价 target.parentNode.children[1].value = parseInt(target.parentNode.children[1].value) + 1; //当前商品数量+1 target.parentNode.parentNode.children[5].innerHTML = '￥' + ((parseInt(target.parentNode.children[1].value)*Dprice).toFixed(2)); //当前商品总额更新 if(target.parentNode.parentNode.children[0].children[0].checked == true){ allCount.children[0].innerHTML = parseFloat(allCount.children[0].innerHTML)+1; allSum.children[0].innerHTML = '￥' + (parseFloat(allSum.children[0].innerHTML.substring(1)) + Dprice); } break; } //选中选择框，checked的值为true else if(target.nodeName.toLowerCase() == 'input' && target.checked == true){ var parent = target.parentNode.parentNode; //找到当前事件事件的ul父节点 //店铺选择框被选中(只要有商品列表中的商品被选中，该店铺选择框就被选中(实际上只改变了label的样式，没有真正将店铺的选择框的checked修改为true)) shopsNameSelectbox.parentNode.children[1].className = 'mark'; //更新商品结算总价 var goodsPrice = parseFloat(parent.children[3].innerHTML.substring(1)); //当前事件对应的列表中商品单价 var goodsCount = parseFloat(parent.children[4].children[1].value); //当前事件的对应的列表中商品数量 var allPrice = goodsPrice*goodsCount + allSumValue; //当前列表的总金额+原来的商品总价 allSum.children[0].innerHTML = '￥' + allPrice; //更新商品总价 //更改商品结算总数 allCount.children[0].innerHTML = goodsCount + allCountValue; //更改商品列表选择框的状态 parent.children[0].children[1].className = 'mark'; break; } //选中选择框，checked的值为false else if(target.nodeName.toLowerCase() == 'input' && target.checked == false){ var parent2 = target.parentNode.parentNode; //找到ul //更新商品总价 var goodsSum2 = parseFloat(parent2.children[5].innerHTML.substring(1)); //当前列表商品总金额 var allPrice2 = allSumValue - goodsSum2; //新的总价 allSum.children[0].innerHTML = '￥' + allPrice2; //更改商品结算总数 var goodsCount2 = parseFloat(parent2.children[4].children[1].value); //当前列表商品总数 allCount.children[0].innerHTML = allCountValue - goodsCount2; //新的商品总数 //更改商品列表选择框的状态 parent2.children[0].children[1].removeAttribute('class'); //判断本店是否所有商品都未被选中 if(!goodsListCheckedCount(target)){ //移除商铺选择框的选中状态 shopsNameSelectbox.parentNode.children[1].removeAttribute('class'); } } //移除商品 else if(target.nodeName.toLowerCase() == 'span' && target.className == 'goods-remove'){ var closeParent = target.parentNode.parentNode; //该事件的ul父节点 closeParentP = closeParent.parentNode; //该事件classname为shops-goods的div父节点 closeParentPPP = closeParentP.parentNode.parentNode; //该事件classname为shops-box的div父节点 var closeCount = parseInt(closeParent.children[4].children[1].value); //被删除节点的列表的商品数目 var closeSum = parseInt(closeParent.children[5].innerHTML.substring(1)); //被删除节点的列表的商品总金额 if(confirm('您确定要移除该商品吗？')){ closeParentP.removeChild(closeParent); //删除指定的ul节点 if(closeParent.children[0].children[0].checked == true){ //如果商品的ul的节点都被删除，并且被删除的列表的选择框别的checked = true allCount.children[0].innerHTML = parseFloat(allCount.children[0].innerHTML)-closeCount; //更新商品总数 allSum.children[0].innerHTML = '￥' + (parseFloat(allSum.children[0].innerHTML.substring(1)) - closeSum); //更新商品总价 } if(closeParentP.children.length == 0){ //该商铺的所有子节点被删除，则删除这个店铺 main.removeChild(closeParentPPP); } } break; } target = target.parentNode; } };}; //window.onload 结束//======================创建店铺和商品列表=================function creatShopBox(){ var main = $('main'); var cookies = JSON.parse(getCookie('myCart')); //创建外围结构div var shopsBox = addElement('div'); //addElement()是封装的用于创建元素节点的 方法 var shopsName = addElement('div'); var shopGoodsWrap = addElement('div'); var shopsGoods = addElement('div'); shopsBox.className = 'shops-box'; shopsName.className = 'shops-name'; shopGoodsWrap.className = 'shops-goods-wrap'; shopsGoods.className = 'shops-goods'; main.appendChild(shopsBox); shopsBox.appendChild(shopsName); shopsBox.appendChild(shopGoodsWrap); shopGoodsWrap.appendChild(shopsGoods); //添加(DIV)shopsNam中的内容o(店铺全选框、店铺名称) var oInput = addElement('input'); oInput.type = 'checkbox'; oInput.id = 'selectShopAll'; var oLable = addElement('label'); //用设置选择框样式，触发对应的input事件 oLable.setAttribute('for','selectShopAll'); var ospan = addElement('span'); ospan.appendChild(addTextNode('店铺：')); //addTextNode()是封装的用于创建文本节点的方法 var shopNameValue = addTextNode('搜猎人艺术生活'); shopsName.appendChild(oInput); shopsName.appendChild(oLable); shopsName.appendChild(ospan); shopsName.appendChild(shopNameValue); //添加(DIV)shopsGoods中的内容 for(var i = 0;i < cookies.length;i++){ addGoodsList(shopsGoods,i); //创建该店铺商品列表，addGoodsList为封装的方法 }}//===========创建一个元素节点通用方法==========function addElement(oElement){ return document.createElement(oElement);}//===========创建一个文本节点通用方法==========function addTextNode(oText){ return document.createTextNode(oText);}//===========增加店铺内的商品列表的通用方法==========function addGoodsList(shopsGoods,index){ //index，总要用于获取cookie指定位置的id,在这个程序中实际上没用，写的目的是为了以后完善没可能会用到 var cookies = JSON.parse(getCookie('myCart')); var xUl = addElement('ul'); var xLi01 = addElement('li'); var xLi02 = addElement('li'); var xLi03 = addElement('li'); var xLi04 = addElement('li'); var xLi05 = addElement('li'); var xLi06 = addElement('li'); var xLi07 = addElement('li'); xUl.className = 'clear'; //清除元素浮动，造成的高度坍塌问题 xLi01.className = 'shops-goods-chk'; xLi02.className = 'shops-goods-mes'; xLi03.className = 'goods-arg'; xLi04.className = 'goods-price'; xLi05.className = 'goods-count'; xLi06.className = 'goods-sum'; xLi07.className = 'goods-remove'; shopsGoods.appendChild(xUl); xUl.appendChild(xLi01); xUl.appendChild(xLi02); xUl.appendChild(xLi03); xUl.appendChild(xLi04); xUl.appendChild(xLi05); xUl.appendChild(xLi06); xUl.appendChild(xLi07); //第0个li中的内容开始x(选择框) var xInput = addElement('input'); xInput.type = 'checkbox'; xInput.id = cookies[index].id; var xLabel = addElement('label'); xLabel.setAttribute('for',xInput.id); xLi01.appendChild(xInput); xLi01.appendChild(xLabel); //第1个li中的内容x(商品图片和描述) var xGoodsImg = addElement('div'); var xGoodsText = addElement('div'); xGoodsImg.className = 'goods-img'; xGoodsText.className = 'goods-text'; var xImgA = addElement('a'); var xTextA = addElement('a'); xTextA.innerHTML = cookies[index].description; //用了另一种添加内容的方式innerHTML，这里仅仅只是用来试试用法 var xImgAImg = addElement('img'); xImgAImg.src = cookies[index].imgSrc; xLi02.appendChild(xGoodsImg); xLi02.appendChild(xGoodsText); xGoodsImg.appendChild(xImgA); xGoodsText.appendChild(xTextA); xImgA.appendChild(xImgAImg); //第2个li中的内容(参数) var x3Text = addTextNode('商品参数'); //这里只是添加了，实际上没有获取值，后期改进可以去设置 xLi03.appendChild(x3Text); //第3个li中的内容开始(单价) var x4GoodsPrice = cookies[index].price; var x4Text = addTextNode(x4GoodsPrice); xLi04.appendChild(x4Text); //第4个li中的内容(加号、检查和列表中的商品数量) var x5ASubt = addElement('a'); //减号 var x5AAddt = addElement('a'); //加号 var x5Input = addElement('input'); //内容框 x5Input.type = 'text'; x5Input.value = cookies[index].count; x5ASubt.innerHTML = '-'; x5AAddt.innerHTML = '+'; xLi05.appendChild(x5ASubt); xLi05.appendChild(x5Input); xLi05.appendChild(x5AAddt); //第5个li中的内容(单行列表商品的总价) var x6GoodsPrice = cookies[index].price; var x6GoodsCount = cookies[index].count; var x6sum = '￥' + parseFloat(parseFloat(x6GoodsPrice.substring(1))*x6GoodsCount).toFixed(2); //保留两位小数 var x6Text = addTextNode(x6sum); xLi06.appendChild(x6Text); //第6个li中的内容(移除商品选项) var x7ASpan = addElement('span'); x7ASpan.innerHTML = '移除商品'; x7ASpan.className = 'goods-remove'; xLi07.appendChild(x7ASpan);}//============判断店铺内的商品是被全部取消==========function goodsListCheckedCount(target){ var sparent = target.parentNode.parentNode.parentNode; var sUl = sparent.getElementsByTagName('ul'); var count = 0; for(var i = 0;i < sUl.length;i++ ){ if(sUl[i].children[0].children[0].checked == true){ count ++; } } if(count == 0){ return false; }else{ return true; }}//==========选中商铺选择框============function selectShopAllBox(target){ var allCount = $('allCount'); //获得商品总数 var allSum = $('allSum'); //获得商品总价 var parent = target.parentNode.parentNode; //当前事件的class名为shops-box的父节点 var shopGoods = parent.getElementsByClassName('shops-goods')[0]; var wUl = shopGoods.getElementsByTagName('ul'); var sum = 0; //临时保存总价 var count = 0; //临时保存总数 if(target.checked == true){ for(var i = 0;i < wUl.length;i++ ){ wUl[i].children[0].children[0].checked = true; //将该店铺内的所有商品的列表的复选框的checked设为true wUl[i].children[0].children[1].className = 'mark'; sum += parseFloat(wUl[i].children[5].innerHTML.substring(1)); //计算总价 count += parseFloat(wUl[i].children[4].children[1].value); //计算总数 } }else if(target.checked == false){ for(var i = 0;i < wUl.length;i++ ){ wUl[i].children[0].children[0].checked = false; wUl[i].children[0].children[1].removeAttribute('class'); } } allSum.children[0].innerHTML = '￥' + sum;//新的商品总数 allCount.children[0].innerHTML = count; //新的商品总数}//==========选中全选选择框============function checkAll(target){ var allCount = $('allCount'); //获得商品总数 var allSum = $('allSum'); //获得商品总价 var shopsBox = $('main').getElementsByClassName('shops-box'); //获取各个店铺的节点 var sum = 0; //用于临时保存总价 var count = 0; //用于临时保存总数 for(var j = 0;j < shopsBox.length;j++){ //遍历所有商铺 var shopGoods = shopsBox[j].getElementsByClassName('shops-goods')[0]; var wUl = shopGoods.getElementsByTagName('ul'); if(target.checked == true){ shopsBox[j].children[0].children[0].checked = true; //将所有商铺的复选框的checked设为true shopsBox[j].children[0].children[1].className = 'mark'; //显示label的背景图 for(var i = 0;i < wUl.length;i++ ){ wUl[i].children[0].children[0].checked = true; //将所有的商品列表的复选框的checked设为true wUl[i].children[0].children[1].className = 'mark'; sum += parseFloat(wUl[i].children[5].innerHTML.substring(1)); //计算选中商品总价 count += parseFloat(wUl[i].children[4].children[1].value); //计算选中商品总数 } }else if(target.checked == false){ shopsBox[j].children[0].children[0].checked = false; shopsBox[j].children[0].children[1].removeAttribute('class'); for(var i = 0;i < wUl.length;i++ ){ wUl[i].children[0].children[0].checked = false; wUl[i].children[0].children[1].removeAttribute('class'); } } } allSum.children[0].innerHTML = '￥' + sum; //设置新的商品总数 allCount.children[0].innerHTML = count; //设置新的商品总数}总结：
1、这个的样式是我从js代码大全仿造的，他原来的代码时用jq写的，好吧！其实我还不会jq。
2、第二个页面是不能够同步更新cookie中的内容的，不过要实现也是可以的，将每次点击加号或者减号后的商品列表的数量更新到cookie中就行了。（好吧！至少我是这么想的）
3、在向cookie中添加内容的时候，会出现id值为NUll的情况，虽然我加了必须要id存在的条件才能设置cookie，但是并不清除为什么会出现这种情况。
4、看到我写的博客会有大于1的浏览量，我好慌张，因为我只是用这个博客在存代码和观察自己的学习进度。写的代码质量又不高，好担心会误导看到的人，罪过……
5、继续学习吧！然后再回来调整或者写个新的页面
阅读全文
0 0
- 简单的购物车和购物车结算
- 购物商城---购物车，结算
- 购物车结算功能
- 购物车结算
- 购物车结算
- 购物车结算
- angular购物车结算
- 利用JQuery实现简单的购物车结算
- 一个简单的购物车结算js分享
- vue2实现简单的商品加入购物车和结算功能（前端数据保存方向）
- 购物车和结算的实现!--c#源代码!
- 购物车和结算的实现!--c#源代码!
- 购物车的实现及结算处理
- 购物车的实现及结算处理
- 购物车的实现及结算处理
- 购物车自动结算功能
- jQuery实现购物车结算
- angularjs购物车结算页面
- MySQL数据库性能检查
- 树莓派-一不小心把树莓派的任务栏删了，如何恢复
- Lock和synchronized比较详解
- 移除集合中的对象
- 使用spring-data-redis实现incr自增
- 简单的购物车和购物车结算
- Java常见面试（9）
- Threejs学习笔记之五几何体
- 分布式_基础
- java 编程思想的学习笔记
- HDU 6172 and HDU 6185 【线性递推 + 思维 + 板子】
- 如何简易方法解决CSDN广告弹窗问题
- reverse
- python基础
