admin管理员组文章数量:1794759
JS代码写简单购物车
实现效果：
CSS样式：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 50%; margin: 1.5rem auto; border-collapse: collapse; border: .1rem solid gray; } th { background: yellow; height: 1rem; border: .1rem solid gray; } tr { height: 1rem; text-align: center; } td { border: .1rem solid gray; } </style> </head>HTML代码：
<body> <table> <tr> <th>商品名称</th> <th>数量</th> <th>单价</th> <th>小计</th> <th>操作</th> </tr> <tr> <td>西瓜</td> <td> <button>-</button> <span class="goods-num">0</span> <button>+</button> </td> <td> 单价：<span>5</span> </td> <td> 小计：<span class="goods-subtotal">0</span> </td> <td> 操作：<input type="button" value="删除"> </td> </tr> <tr> <td>樱桃</td> <td> <button>-</button> <span class="goods-num">0</span> <button>+</button> </td> <td> 单价：<span>10</span> </td> <td> 小计：<span class="goods-subtotal">0</span> </td> <td> 操作：<input type="button" value="删除"> </td> </tr> <tr> <td colspan="5">一共<span class="goods-total-num">0</span>件商品，一共<span class="goods-total-price">0</span>元</td> </tr> </table> </body>JS代码：
<script> class Cart { //更新总数 updateGoodsTotalNum() { //获取到数量中间的数字==数组中保存 let oGoodsNum = document.getElementsByClassName("goods-num") //设置总数量的初始数字为0 let goodsTotalNum = 0; //总的数量是将所有的商品数量加起来 for (let i = 0; i < oGoodsNum.length; i++) { goodsTotalNum += oGoodsNum[i].innerHTML / 1; } //获取到总数的这个span标签，注意是class名，要打点 let oGoodsTotalNum = document.querySelector(".goods-total-num"); //总数的值=累加起来的goodsTotalNum oGoodsTotalNum.innerHTML = goodsTotalNum; } //更新商品总价格 updateGoodsTotalPrice() { //获取到小结中间的数字 let oGoodsSubtotal = document.getElementsByClassName("goods-subtotal"); //给总价钱设置初始值为0 let goodsTotalprice = 0; //总的钱数是将所有的商品钱数加起来 for (let i = 0; i < oGoodsSubtotal.length; i++) { goodsTotalprice += oGoodsSubtotal[i].innerHTML / 1; } //获取到总钱数的这个span标签，注意是class名，要打点 let oGoodsTotalprice = document.querySelector(".goods-total-price"); //总钱数的值=累加起来的goodsTotalprice oGoodsTotalprice.innerHTML = goodsTotalprice; } //添加货物 //btn就是被点击的元素 addGoods(btn) { //1数量 //找到在+号按钮的上一个兄弟节点 let oGoodsNum = btn.previousElementSibling; //商品的数量=原来商品的数量+1； oGoodsNum.innerHTML = oGoodsNum.innerHTML / 1 + 1; //2小计=数量*单价 //找到+号按钮的父节点的下一个节点的第一个孩子，就是相当于是找到了单价这个需要改的数字 let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild; //就是相当于是找到了小计这个需要改的数字 let oGoodsSubtotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild; oGoodsSubtotal.innerHTML = oGoodsNum.innerHTML * oGoodsPrice.innerHTML; //3总个数 this.updateGoodsTotalNum(); //4总价 this.updateGoodsTotalPrice(); } minGoods(btn) { let oGoodsNum = btn.nextElementSibling; //如果商品的数量大于0 if (oGoodsNum.innerHTML > 0) { //商品的数量在原数量的基础上减一 oGoodsNum.innerHTML = oGoodsNum.innerHTML / 1 - 1; //找到单价的 let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild; //找到小结的 let oGoodsSubtotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild; //小结=数目*单价 oGoodsSubtotal.innerHTML = oGoodsNum.innerHTML * oGoodsPrice.innerHTML; // 3.总数 this.updateGoodsTotalNum(); // 4.总价 this.updateGoodsTotalPrice(); } } //删除按钮 delGoods(btn) { //找到删除按钮的父的父，就相当于是要被删除的这一行 let oTr = btn.parentNode.parentNode; //将这一行删除 oTr.remove(); //调用计算总数和总价的，重新计算 this.updateGoodsTotalNum(); this.updateGoodsTotalPrice(); } evenBind() { //找到 -和+的按钮 let oBtns = document.getElementsByTagName("button"); //遍历找到所点击的 let that = this; for (let i = 0; i < oBtns.length; i++) { //如果索引是偶数的话，是- if (i % 2 == 0) { oBtns[i].onclick = function () { that.minGoods(this) } } else { //如果索引是奇数的话，是+ oBtns[i].onclick = function () { that.addGoods(this) } } } //找到删除的按钮 let delBtns = document.getElementsByTagName("input"); //遍历，看点击的是哪一个删除 for (let i = 0; i < delBtns.length; i++) { delBtns[i].onclick = function () { that.delGoods(this); } } } } let c = new Cart(); c.evenBind(); </script>版权声明：本文标题：JS代码写简单购物车 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686559287a81848.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论