<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <!--购物车样式表--> <link type="text/css" href="https://www.jb51.net/css/cart.css" /> <!--操作cookie的js文件--> <script type="text/javascript" src="https://www.jb51.net/js/cookie.js"></script> </head> <body> <div> <h1>购物车</h1> <h3><a href="https://www.jb51.net/index.html" >返回商品列表页面</a></h3> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th> <input type="checkbox" />全选 </th> <th> 图片 </th> <th> 描述 </th> <th> 数量 </th> <th> 单价 </th> <th> 小计 </th> <th> 操作 </th> </tr> </thead> <tbody> <!-- <tr> <td> <input type="checkbox" /> </td> <td> <img src="https://www.jb51.net/images/p1.jpg" alt="" /> </td> <td> 酷黑，棒棒棒棒 </td> <td> <button>-</button><input type="text" value="1" readonly="readonly" /><button>+</button> </td> <td> ￥<span>111</span> </td> <td> ￥<span>111</span> </td> <td> <button >删除</button> </td> </tr> --> </tbody> </table> <div>购物车里没有任何商品</div> <h2>总价格：￥<span>0</span></h2> </div> <script src="https://www.jb51.net/js/server.js" type="text/javascript" charset="utf-8"></script> <!--操作购物车页面的cart.js--> <script src="https://www.jb51.net/js/cart.js"></script> </body> </html>
在对购物车进行相关的表现设计之后，既要进行javascript行为设计，请看与本页相关的cart.js代码：
/* 思路： 第一步：当页面加载完后，根据本地的数据，动态生成表格（购物车列表） 获取所要操作的节点对象 判断购物车中是否有数据？ 有： 显示出购物列表 没有： 提示购物车为空 第二步：当购物车列表动态生成后，获取tbody里所有 的checkeBox标签节点对象，看那个被选中就获取对应行小计进行总价格运算。 第三步： 为每一个checkbox添加一个onchange事件，根据操作更改总价格 第四步：全选 第五步： 为加减按钮添加一个鼠标点击事件 更改该商品的数量 第六步：删除 获取所有的删除按钮 为删除按钮添加一个鼠标点击事件 删除当前行，并更新本地数据 */ var listObj = getAllData(); var table = document.getElementById("table") var box = document.getElementById("box") var tbody = document.getElementById("tbody"); var totalPrice = document.getElementById("totalPrice"); var allCheck = document.getElementById("allCheck"); if(listObj.length == 0) { //购物车为空 box.className = "box"; table.className = "hide"; } else { box.className = "box hide"; table.className = ""; for(var i = 0, len = listObj.length; i < len; i++) { var tr = document.createElement("tr"); tr.setAttribute("pid", listObj[i].pid); //{"pid":值,"pImg":值,"pName":值,"pDesc":值,"price":值,"pCount":1}, tr.innerHTML = '<td>' + '<input type="checkbox" />' + '</td>' + '<td>' + '<img src="' + listObj[i].pImg + '" alt="" />' + '</td>' + '<td>' + listObj[i].pDesc + '</td>' + '<td>' + '<button>-</button><input type="text" value="' + listObj[i].pCount + '" readonly="readonly" /><button>+</button>' + '</td>' + '<td>' + '￥<span>' + listObj[i].price + '</span>' + '</td>' + '<td>' + '￥<span>' + listObj[i].price * listObj[i].pCount + '</span>' + '</td>' + '<td>' + '<button >删除</button>' + '</td>'; tbody.appendChild(tr); } } /* 功能：计算总价格 */ var cks = document.querySelectorAll("tbody .ck"); function getTotalPrice() { cks = document.querySelectorAll("tbody .ck"); var sum = 0; for(var i = 0, len = cks.length; i < len; i++) { if(cks[i].checked) { //如果当前被选中 var tr = cks[i].parentNode.parentNode; var temp = tr.children[5].firstElementChild.innerHTML; sum = Number(temp) + sum; } } return sum; } /*循环遍历为每一个checkbox添加一个onchange事件*/ for(var i = 0, len = cks.length; i < len; i++) { cks[i].onchange = function() { checkAllChecked(); totalPrice.innerHTML = getTotalPrice(); } } /*全选实现*/ allCheck.onchange = function() { if(this.checked) { for(var i = 0, len = cks.length; i < len; i++) { cks[i].checked = true; } } else { for(var i = 0, len = cks.length; i < len; i++) { cks[i].checked = false; } } totalPrice.innerHTML = getTotalPrice(); } var downs = document.querySelectorAll(".down"); //一组减的按钮 var ups = document.querySelectorAll(".up"); //一组加的按钮 var dels = document.querySelectorAll(".del"); //一组删除按钮 for(var i = 0, len = downs.length; i < len; i++) { downs[i].onclick = function() { var txtObj = this.nextElementSibling;//下一个兄弟节点 var tr = this.parentNode.parentNode; var pid = tr.getAttribute("pid"); txtObj.value = txtObj.value - 1; if(txtObj.value < 1) { txtObj.value = 1; updateObjById(pid, 0) } else { updateObjById(pid, -1) } tr.children[0].firstElementChild.checked = true; checkAllChecked(); var price = tr.children[4].firstElementChild.innerHTML; tr.children[5].firstElementChild.innerHTML = price * txtObj.value; totalPrice.innerHTML = getTotalPrice(); } ups[i].onclick = function() { var txtObj = this.previousElementSibling;//上一个兄弟节点 var tr = this.parentNode.parentNode; var pid = tr.getAttribute("pid"); txtObj.value = Number(txtObj.value) + 1; updateObjById(pid, 1) tr.children[0].firstElementChild.checked = true; checkAllChecked() var price = tr.children[4].firstElementChild.innerHTML; tr.children[5].firstElementChild.innerHTML = price * txtObj.value; totalPrice.innerHTML = getTotalPrice(); } dels[i].onclick = function() { var tr = this.parentNode.parentNode; var pid = tr.getAttribute("pid") if(confirm("确定删除？")) { //remove() 自杀 tr.remove(); listObj = deleteObjByPid(pid); } if(listObj.length == 0) { //购物车为空 box.className = "box"; table.className = "hide"; } else { box.className = "box hide"; table.className = ""; } totalPrice.innerHTML = getTotalPrice(); } } /*检测是否要全选*/ function checkAllChecked() { var isSelected = true; //全选是否会选中 for(var j = 0, len = cks.length; j < len; j++) { if(cks[j].checked == false) { isSelected = false; break; } } allCheck.checked = isSelected; }
上述代码完成了购物车中的相关操作，比如价格计算，商品数量更换，商品删除等操作。