Closed Wscats closed 6 years ago
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul class="goods"> <li data-guid="g01"> <p>短袖衬衣</p> <p class="price">98.88</p> <div class="add2cart"> <button>添加到购物车</button> </div> </li> <li data-guid="g02"> <p>短袖衬衣2</p> <p class="price">88.88</p> <div class="add2cart"> <button>添加到购物车</button> </div> </li> <li data-guid="g03"> <p>短袖衬衣3</p> <p class="price">9.98</p> <div class="add2cart"> <button>添加到购物车</button> </div> </li> <li data-guid="g04"> <p>短袖衬衣4</p> <p class="price">8.88</p> <div class="add2cart"> <button>添加到购物车</button> </div> </li> </ul> <a href="结算.html">去结算</a> <script> var goods = document.querySelector(".goods"); console.log(goods) var carlist = []; var cookie = document.cookie.split('; '); for(var i = 0; i < cookie.length; i++) { var arr = cookie[i].split('='); if(arr[0] === 'carlist') { // 在cookie中得到的数据都是字符串 // 所以需要转换成数组/对象 carlist = JSON.parse(arr[1]); } console.log(carlist) } goods.addEventListener("click", function(e) { console.log(e.target.nodeName.toLowerCase() === "button") if(e.target.nodeName.toLowerCase() === "button") { var li = e.target.parentNode.parentNode; var liId = li.getAttribute('data-guid'); console.log(liId) } for(var i = 0; i < carlist.length; i++) { if(carlist[i].gid === liId) { carlist[i].num++; break; } } console.log(i) console.log(li.children[0].innerHTML) if(i === carlist.length) { // 创建一个对象,用于保存商品信息 var obj = {}; obj.gid = liId; obj.name = li.firstElementChild.innerHTML; obj.price = li.children[1].innerHTML; obj.num = 1; carlist.push(obj); } console.log(carlist); var now = new Date(); now.setDate(now.getDate() + 3); document.cookie = ('carlist=' + JSON.stringify(carlist) + ';expires=' + now); }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> </ul> <button id="btnClear">清除购物车</button> <script> var carlist = []; var cookie = document.cookie.split('; '); for(var i = 0; i < cookie.length; i++) { var arr = cookie[i].split('='); if(arr[0] === 'carlist') { // 在cookie中得到的数据都是字符串 // 所以需要转换成数组/对象 carlist = JSON.parse(arr[1]); } console.log(carlist) } var ul = document.querySelector("ul") function render() { var str = carlist.map(function(item) { return "<li data-guid='" + item.gid + "'>" + item.name + "</li>" }).join("") console.log(str); ul.innerHTML = ""; ul.innerHTML = str; } render(); ul.addEventListener("click", function(e) { console.log(e.target.getAttribute("data-guid")) var liId = e.target.getAttribute("data-guid"); //删除 /*for(var i=0;i<carlist.length;i++){ if(carlist[i].gid === liId){ carlist.splice(i,1); render(); var now = new Date(); now.setDate(now.getDate() + 3); document.cookie = 'carlist=' + JSON.stringify(carlist) + ';expires='+now; break; } }*/ //增加 for(var i = 0; i < carlist.length; i++) { if(carlist[i].gid === liId) { carlist[i].num++; render(); var now = new Date(); now.setDate(now.getDate() + 3); document.cookie = 'carlist=' + JSON.stringify(carlist) + ';expires=' + now; break; } } }) // 清空购物车 // 删除carlist这个cookie // 利用设置过期时间达到删除的效果。 var btnClear = document.querySelector("#btnClear"); btnClear.onclick = function() { var now = new Date(); now.setDate(now.getDate() - 1); document.cookie = 'carlist=null;expires=' + now; // 清空数组 carlist = []; render(); } </script> </body> </html>
商品列表
购物车