javascript 实现购物车页面
（2020-09-10更新：修复发现的bug，优化代码）
跟商城有关系的网站，难免会有购物车的结账界面。
我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。
欢迎指点！~
图片没有提供，建议自己替换。
效果如图：
用到的素材：加号 减号 商品图 删除图标 选中的图标和没选中的图标
代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>document</title> <style> * { margin: 0; padding: 0; list-style: none; font-size: 16px; font-family: 'arial'; font-weight: normal; } table { width: 1020px; margin: 0 auto; border: 1px solid gray; margin-top: 30px; border-collapse: collapse; text-align: center; } table tr { height: 100px; line-height: 100px; } table th:nth-child(1) { width: 72px; } table th:nth-child(2) { width: 357px; } table th:nth-child(3) { width: 133px; } table th:nth-child(4) { width: 153px; } table th:nth-child(5), table th:nth-child(6) { width: 152px; } thead { background: black; color: white; } thead tr, tfoot tr { height: 40px; line-height: 40px; } tbody tr { border-bottom: 1px solid black; } table img { float: left; width: 65px; height: 65px; margin-top: 18px; } table input[type='checkbox'] { width: 32px; height: 32px; -webkit-appearance: none; background: url(./cart/checkbox.png) no-repeat center center; vertical-align: middle; } input[type='checkbox']:checked { background: url(./cart/check.png) no-repeat center center; } table .add, table .dec, table .del { display: inline-block; width: 14px; height: 21px; cursor: pointer; } table .add { background: url(./cart/add.png) no-repeat center center; } table .dec { background: url(./cart/dec.png) no-repeat center center; } table .del { width: 18px; background: url(./cart/del.png) no-repeat; } table .num { display: inline-block; width: 57px; margin: 0 18px; height: 39px; line-height: 39px; border: 1px solid #b0b0b0; background: #d4d4d4; } table .money, table .total { color: red; } table .choosen { color: #3083ff; } table .sure { width: 100%; height: 100%; background: #3083ff; color: #fff; border: none; cursor: pointer; } </style> </head> <body onselectstart="return false;" style="-moz-user-select: none"> <table> <thead> <tr> <th><input type="checkbox" /></th> <th>商品信息</th> <th>数量</th> <th>单价<span>（元）</span></th> <th>金额<span>（元）</span></th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td> <img src="./cart/good.png" /> <p>小呀小苹果（一）</p> </td> <td> <span class="add"></span> <span class="num">3</span> <span class="dec"></span> </td> <td class="per">￥<span>1900</span></td> <td class="money">￥<span>3800</span></td> <td><a class="del"></a></td> </tr> <tr> <td><input type="checkbox" /></td> <td> <img src="./cart/good.png" /> <p>小呀小苹果（二）</p> </td> <td> <span class="add"></span> <span class="num">3</span> <span class="dec"></span> </td> <td class="per">￥<span>1900</span></td> <td class="money">￥<span>3800</span></td> <td><a class="del"></a></td> </tr> <tr> <td><input type="checkbox" /></td> <td> <img src="./cart/good.png" /> <p>小呀小苹果（三）</p> </td> <td> <span class="add"></span> <span class="num">3</span> <span class="dec"></span> </td> <td class="per">￥<span>1900</span></td> <td class="money">￥<span>3800</span></td> <td><a class="del"></a></td> </tr> </tbody> <tfoot> <tr> <td></td> <td> 已选：<span class="choosen">0</span>件 共 <span class="total">0</span>元 </td> <td></td> <td></td> <td></td> <td><button class="sure">结账</button></td> </tr> </tfoot> </table> <script> window.onload = function () { var oListNumber = document.getElementsByClassName('add').length var oAdds = document.getElementsByClassName('add') var oDecs = document.getElementsByClassName('dec') var oDels = document.getElementsByClassName('del') var oInputs = document.getElementsByTagName('input') var oAllChecked = false //全选 var othercheckbox = 0 //除了全选以外的其他checkbox changeMoney() // checkbox点击事件 for (var i = 0; i < oInputs.length; i++) { oInputs[i].onclick = function () { // 判断除了全选以外的checkbox if (i != 0) { if (this.checked == true) { othercheckbox++ } else { othercheckbox-- } } // 判断是否全选 if (othercheckbox == oListNumber) { oInputs[0].checked = true } else { oInputs[0].checked = false } // 判断是否选择了全选checkbox if (i == 0) { oAllChecked = !oAllChecked for (var j = 0; j < oInputs.length; j++) { oInputs[j].checked = oAllChecked } if (oAllChecked) { othercheckbox = oListNumber } else { othercheckbox = 0 } } changeTotal() } } // add事件 for (var i = 0; i < oAdds.length; i++) { oAdds[i].onclick = function () { this.nextElementSibling.innerText = parseInt(this.nextElementSibling.innerText) + 1 changeMoney() changeTotal() } } // dec事件 for (var i = 0; i < oDecs.length; i++) { oDecs[i].onclick = function () { if (this.previousElementSibling.innerText != '0') { this.previousElementSibling.innerText = parseInt(this.previousElementSibling.innerText) - 1 } changeMoney() changeTotal() } } // add事件和dec事件伴随的金额改变事件 function changeMoney() { var oListNumber = document.getElementsByClassName('add').length var oNums = document.getElementsByClassName('num') var oMoneys = document.getElementsByClassName('money') var oPers = document.getElementsByClassName('per') var oPerSpan = [] //单价 var oMoneySpan = [] //金额 for (var i = 0; i < oListNumber; i++) { oPerSpan[i] = oPers[i].getElementsByTagName('span')[0].innerText oMoneySpan[i] = oMoneys[i].getElementsByTagName('span')[0] oMoneySpan[i].innerText = parseInt(oNums[i].innerText) * parseInt(oPerSpan[i]) } } // del事件 for (var i = 0; i < oDels.length; i++) { oDels[i].onclick = function () { var thisdom = this.parentNode.parentNode var tbody = thisdom.parentNode tbody.removeChild(thisdom) changeTotal() } } // 总数量 总金额 function changeTotal() { var oNums = document.getElementsByClassName('num') var oInputs = document.getElementsByTagName('input') var oMoneys = document.getElementsByClassName('money') var oChoosen = document.getElementsByClassName('choosen')[0] var oTotal = document.getElementsByClassName('total')[0] var sumNUM = 0 var sumTOTAL = 0 for (var i = 1; i < oInputs.length; i++) { if (oInputs[i].checked) { sumNUM = parseInt(oNums[i - 1].innerText) + parseInt(sumNUM) sumTOTAL = parseInt( oMoneys[i - 1].getElementsByTagName('span')[0].innerText ) + parseInt(sumTOTAL) } } oChoosen.innerText = sumNUM oTotal.innerText = sumTOTAL } } </script> </body> </html>
