cookie实现购物车添加_html-js-css

概述<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>购物页面</title><style>img{width:300px;height:300px;}ul{list-style:none;padding:0;margin:0;}button{width:200px;height:50p
 <!DOCTYPE HTML><HTML lang="en"><head><Meta charset="UTF-8"><Title>购物页面</Title><style>img{wIDth:300px;height:300px;}ul{List-style:none;padding:0;margin:0;}button{wIDth:200px;height:50px;text-align: center;color:white;background:black;Font-size: 30px;cursor: pointer;}a{display: block;margin:0 auto;wIDth:200px;height:80px;text-align: center;line-height :80px;color:white;background:red;Font-size: 60px;Font-weight: 900;text-decoration: none;cursor: pointer;}.goods li{display:inline-block;border:1px solID #ddd;padding:10px;margin:10px;text-align: center;}.goods li:hover{background-color:#efefef;}.goods .price{color:#f00;Font-weight:900;}.goods .price::before{content:"￥";}</style><script src = "../cookie.Js"></script><script>window.onload = function(){var goods = document.getElementsByClassname(‘goods‘)[0];// 用于保存购物车商品信息var carList = [];// 先获取当前cookievar cookies = document.cookie.split(‘; ‘);for(var i=0;i<cookies.length;i++){var arr = cookies[i].split(‘=‘);if(arr[0] === ‘carList‘){carList = JsON.parse(arr[1]);}}// getcookie(carList);// 事件委托goods.onclick = function(e){e = e || window.event;var target = e.target || e.srcElement;// 添加到购物车if(target.tagname === ‘button‘){// 获取当前livar currentli = target.parentElement.parentElement;var children = currentli.children;var currentGUID = currentli.getAttribute(‘data-guID‘);// 先创建一个对象保存当前商品信息var goodsObj = {};goodsObj.guID = currentGUID;goodsObj.qty = 1;goodsObj.name = children[1].INNERHTML;goodsObj.price = children[2].INNERHTML;goodsObj.imgurl = children[0].src;// 如果cookie为空，则直接添加if(carList.length===0){// 添加到carListcarList.push(goodsObj);}else{// 先判断cookie中有无相同的guID商品for(var i=0;i<carList.length;i++){// 如果商品已经存在cookie中，则数量+1if(carList[i].guID === currentGUID){carList[i].qty++;break;}}// 如果原cookie中没有当前商品if(i===carList.length){// 添加到carListcarList.push(goodsObj);} }   // 存入cookie// 把对象/数组转换诚Json字符串：JsON.stringify()document.cookie = ‘carList=‘ + JsON.stringify(carList);}}}</script></head><body><ul class="goods"><li data-guID="g01"><img src="images/2.png"><p>短袖衬衣</p><p class="price">98.88</p><div class="add2cart"><button>添加到购物车</button></div></li><li data-guID="g02"><img src="images/3.png"><p>短袖衬衣2</p><p class="price">88.88</p><div class="add2cart"><button>添加到购物车</button></div></li><li data-guID="g03"><img src="images/4.png"><p>短袖衬衣3</p><p class="price">9.98</p><div class="add2cart"><button>添加到购物车</button></div></li><li data-guID="g04"><img src="images/5.png"><p>短袖衬衣4</p><p class="price">8.88</p><div class="add2cart"><button>添加到购物车</button></div></li></ul><a href="res.HTML">去结算</a></body></HTML><!--购物车页面 --><!DOCTYPE HTML><HTML lang="en"><head><Meta charset="UTF-8"><Title>购物车</Title><style>#carList li{position:relative;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solID #ddd;}#carList img{display:block;wIDth:100px;}#carList li .btn-close{position:absolute;top:0;right:0;padding:0 5px;cursor:default;}#carList li .btn-close:hover{background-color:#f00;color:#fff;}.subPrice{padding:5px 20px;color:#f00;Font-weight:900;text-align:right;}#carList .price{color:#f00;}.price::before{content:‘￥‘;Font-size:11px;}#carList .price span{Font-size:11px;}</style><script src ="../cookie.Js"></script><script>window.onload = function(){/*读取cookie中的carList把Json字符串转换成对象/数组：JsON.parse()Json字符串格式：1.必须用双引号2.不能右注释*/var oCarList = document.getElementByID(‘carList‘);var oSubPrice = oCarList.nextElementSibling;var btnClear = document.getElementByID(‘btnClear‘);var carList;var cookies = document.cookie.split(‘; ‘);for(var i=0;i<cookies.length;i++){var arr = cookies[i].split(‘=‘);if(arr[0] === ‘carList‘){console.log(JsON.parse(arr[1]));carList = JsON.parse(arr[1]);}}// getcookie(carList);var subPrice = 0;if(carList){var ul = document.createElement(‘ul‘);for(var i=0;i<carList.length;i++){var li = document.createElement(‘li‘);// 给每个li添加data-guID属性li.setAttribute(‘data-guID‘,carList[i].guID);// 商品名var Title = document.createElement(‘h4‘);Title.INNERHTML = carList[i].name;// 商品价格var price = document.createElement(‘p‘);price.classname = ‘price‘;price.INNERHTML = carList[i].price +" X "+ carList[i].qty;// 商品图片var img = document.createElement(‘img‘);img.src = carList[i].imgurl;// 添加删除按钮var btnClose = document.createElement(‘span‘);btnClose.INNERHTML = ‘&times;‘;btnClose.classname = ‘btn-close‘;// 计算总价subPrice += carList[i].price*carList[i].qty;li.appendChild(Title);li.appendChild(price);li.appendChild(img);li.appendChild(btnClose);ul.appendChild(li);}// 写入页面oCarList.appendChild(ul);// 写入总价// toFixed(n)获取小数点后n位（自动四舍五入，Number类型的方法）oSubPrice.INNERHTML = ‘<span >‘ + subPrice.toFixed(2) + ‘</span>‘;}// 删除商品oCarList.onclick = function(e){e = e || window.event;var target = e.target || e.srcElement;// 是否点击了删除按钮if(target.classname === ‘btn-close‘){var currentli = target.parentElement;// 获取当前guIDvar currentGUID = currentli.getAttribute(‘data-guID‘); // 删除cookie中对应的商品// 根据guID取对比for(var i=0;i<carList.length;i++){// 找出要删除的商品if(carList[i].guID === currentGUID){carList.splice(i,1);break;}}// 更新cookiedocument.cookie = ‘carList=‘ + JsON.stringify(carList);// 删除li节点currentli.parentElement.removeChild(currentli);}}// 清空购物车// 1、删除DOM节点// 2、删除cookiebtnClear.onclick = function(){oCarList.INNERHTML = ‘‘;oSubPrice.INNERHTML = ‘‘;// 利用设置有效期位过期事件来达到删除cookie的效果var Now = new Date();Now.setDate(Now.getDate()-7);document.cookie = ‘carList=xx;expires=‘ + Now;}}</script></head><body><h1>购物车</h1><div ID="carList"></div><div class="subPrice"></div><a href="#" ID="btnClear">清空购物车</a></body></HTML>