简单的购物车和购物车结算
2024-06-11 01:04:48
购买部分
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()转化为数组arrCookiesfor(var i = 0; i < arrCookies.length;i ++){ //将arrCookies[i]中与goodsMessage内容相同的count+1if(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){ //如果当前商品数量大于1target.parentNode.children[1].value = parseInt(target.parentNode.children[1].value) - 1; //当前商品数量-1target.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; //当前商品数量+1target.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的值为trueelse 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的值为falseelse 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 = trueallCount.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'));//创建外围结构divvar 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设为truewUl[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设为trueshopsBox[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、继续学习吧！然后再回来调整或者写个新的页面
简单的购物车和购物车结算相关推荐
- python+selenium+chrome实现淘宝购物车秒杀自动结算
python+selenium+chrome实现淘宝购物车秒杀自动结算 一.所需环境 二.安装 三.代码 最后run()一把就ok了!! 之前总是想要买aj,但是淘宝店铺每次发售手动抢的时候一般都会被 ...
- mysql简易购物车系统_基于PHP+Mysql简单实现了图书购物车系统的实例详解
基于PHP+Mysql简单实现了图书购物车系统的实例详解,购物车,这是,页面,简单,图书 基于PHP+Mysql简单实现了图书购物车系统的实例详解 易采站长站,站长之家为您整理了基于PHP+Mysql ...
- C++ 实验四 NO. 3 书店的前台收银销售类, 请完成该类定义，实验并且要满足: 1）向购物车中添加书籍；2):查看购物车；3):结算
//************************************************************************************************** ...
- vue外卖十九：商家详情-底部购物车组件，购物车相关vuex状态设计、相关计算、清空购物车+滚动购物车
一.购物车基础 1)购物车状态设计cartFoods+mutation store/state.js // 所有要管理的状态数据:从页面需求分析出来,最好和api/index.js里的命名相同 exp ...
- SpringBoot-项目4-购物车(添加入购物车，购物车列表，购物车商品数量加减操作)
64. 购物车-创建数据表 # 注意:没有添加相应的not null约束 CREATE TABLE t_cart (cid INT AUTO_INCREMENT COMMENT '购物车数据id',u ...
- Android商城开发----点击加入购物车，购物车商品的增删减
Android商城开发----点击加入购物车,购物车商品的增删减 上一章节:[分类页面]点击左侧类别,实现右侧对应类别商品的展示 本文是在上一章节基础上开发的,点击[分类]页面商品的加入购物车按钮,实 ...
- SpringBoot+Vue实现商品不能重复加入购物车、购物车中展示商品的信息、删除商品重点提示等操作。如何点击图片实现图片放大
如何通过点击商品详情下方的加入购物车按钮,将商品信息加入到个人购物车下?如何阻止重复加入同一个商品到购物车?如何在删除购物车中的商品时,重点提示?后端的数据库如何设计来保证加入的商品在当前用户下? 前 ...
- RxJava+Retrofit+Mvp实现购物车（没有结算页面）
先给大家展示一下效果图 框架结构: 1.项目框架:MVP,图片加载用Fresco,网络请求用OKhttp+Retrofit实现(自己封装,加单例模式), 2.完成购物车数据添加(如果接口无数据,可用接 ...
- 购物车js代码_JS实现购物车商品列表结算功能代码
下载地址 js代码window.onload = function () { if (!document.getElementsByClassName) { document.getElementsB ...
最新文章
- python使用matplotlib可视化线图（line plot）、并自定义线条的粗细(线条的宽度、 line width in Matplotlib)
- tensorflow中的placeholder()
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：让按钮看起来像个链接 (仍然保留按钮行为)...
- jQuery的Tooltip插件
- CTF ---pwndbg 调试常用命令
- [转]【Android】9-patch图片以及例子说明
- Windows下安装谷歌测试框架Googletest并测试小例子
- 51Nod 1058 N的阶乘的长度
- Novernber Rain
- POST数据加密问题
- 视频课程：CMOS模拟集成电路设计--已上线
- 用友NC报表行数能否配置
- git使用时报错：fatal: unable to access ‘xxx‘ : Failed to connect to github.com port 443 after: 【Time out】
- 使用Free Spire.Doc for Java 处理word文档换行
- The Devil is in the Details: Self-Supervised Attention for Vehicle Re-Identification（翻译）
- 祝你永远理性，永远能不识时务的抖机灵
- Android 百度离线地图下载完后调用下载好的离线包
- 教大家看懂安卓build.prop文件详情
- Java项目：springboot医院信息管理系统
- positio有哪些属性？position的属性如何使用