<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物页面</title> <style> img{ 300px; height:300px; } ul{ list-style:none; padding:0; margin:0; } button{ 200px; height:50px; text-align: center; color:white; background:black; font-size: 30px; cursor: pointer; } a{ display: block; margin:0 auto; 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 = []; // 先获取当前cookie var 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'){ // 获取当前li var 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){ // 添加到carList carList.push(goodsObj); }else{ // 先判断cookie中有无相同的guid商品 for(var i=0;i<carList.length;i++){ // 如果商品已经存在cookie中，则数量+1 if(carList[i].guid === currentGUID){ carList[i].qty++; break; } } // 如果原cookie中没有当前商品 if(i===carList.length){ // 添加到carList carList.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; 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 = '×'; 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 class="price">' + 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; // 获取当前guid var 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; } } // 更新cookie document.cookie = 'carlist=' + JSON.stringify(carList); // 删除li节点 currentLi.parentElement.removeChild(currentLi); } } // 清空购物车 // 1、删除DOM节点 // 2、删除cookie btnClear.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>