最近疫情影响很大,在家也出不去,只能学习啦,下面是效果,废话不多说,直接上代码
ps:明天我会继续改进,后续我会继续改进购物车以及服务器版本的购物车
<!DOCTYPE html> <html lang="en"> <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: 30px auto; border-collapse: collapse; } th { background: hotpink; height: 2.5em; margin: 0 auto; } tr { height: 2.5em; margin: 0 auto; text-align: center; } </style> </head> <body> <table> <thead> <tr> <th>商品名称</th> <th>数量</th> <th>单价</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody class="cart"> <tr> <td>肉夹馍</td> <td> <button type="button">-</button><span class="num">0</span><button type="button">+</button> </td> <td> 单价:<span class="price">18</span> </td> <td> 小计:<span class="sum">0</span> </td> <td> 操作<input class="del" type="button" value="删除" /> </td> </tr> <tr> <td>凉皮</td> <td> <button type="button">-</button><span class="num">0</span><button type="button">+</button> </td> <td> 单价:<span class="price">16</span> </td> <td> 小计:<span class="sum">0</span> </td> <td> 操作:<input class="del" type="button" value="删除" /> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5"> 一共<span class="goods-total-num">0</span>件商品,共计花费<span class="goods-total-price">0</span>元。 </td> </tr> </tfoot> </table> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>操作</th> </tr> </thead> <tbody class="store"> <tr> <td class="name">西红柿</td> <td> 单价:<span class="single-price">1</span> </td> <td> 操作:<input class="add" type="button" value="添加" /> </td> </tr> <tr> <td class="name">鸡蛋</td> <td> 单价:<span class="single-price">33</span> </td> <td> 操作:<input class="add" type="button" value="添加" /> </td> </tr> </tbody> </table> </body> </html> <script> class Cart { constructor() { this.eventBind(); } //计算总数 getGoodsNum() { //获取商品数量 let oGoodsNum = document.querySelectorAll(".num"); let totalNum = 0; for (let i = 0; i < oGoodsNum.length; i++) { totalNum += Number(oGoodsNum[i].innerHTML); } //获取商品总数 赋值 let oGoodsTotalNum = document.querySelector(".goods-total-num"); oGoodsTotalNum.innerHTML = totalNum; } //计算总价 getGoodsPrice() { //获取商品小计 let oGoodsSum = document.querySelectorAll(".sum"); let totalPrice = 0; for (let i = 0; i < oGoodsSum.length; i++) { //小计赋值 // oGoodsSum[i].innerHTML = this.getGoodsPrice(oGoodsNum[i],oGoodsPrice[i]); totalPrice += Number(oGoodsSum[i].innerHTML); } //获取商品总价 let oGoodsTotalPrice = document.querySelector(".goods-total-price"); oGoodsTotalPrice.innerHTML = totalPrice; } //小计 getGoodsSum(num, price) { return num * price; } //增加货物 addGoods(btn) { //获取数量并执行加一 let oNum = btn.previousElementSibling; oNum.innerHTML = Number(oNum.innerHTML) + 1; //获取价格 let oPrice = btn.parentNode.nextElementSibling.firstElementChild; //获取小计 let oSum = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild; //小计赋值 oSum.innerHTML = this.getGoodsSum(oNum.innerHTML, oPrice.innerHTML); //更新总数 this.getGoodsNum(); //更新总价 this.getGoodsPrice(); } //减少货物 disGoods(btn) { //获取数量并执行减一 let oNum = btn.nextElementSibling; if (oNum.innerHTML > 0) { oNum.innerHTML -= 1; //获取价格 let oPrice = btn.parentNode.nextElementSibling.firstElementChild; //获取小计 let oSum = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild; //小计赋值 oSum.innerHTML = this.getGoodsSum(oNum.innerHTML, oPrice); //更新总数 this.getGoodsNum(); //更新总价 this.getGoodsPrice(); } } //删除货物 delGoods(btn) { let oTr = btn.parentNode.parentNode; //删除节点 oTr.remove(); //更新总数 this.getGoodsNum(); //更新总价 this.getGoodsPrice(); } eventBind() { let oBtn = document.querySelectorAll("button"); let that = this; for (let i = 0; i < oBtn.length; i++) { if (i % 2 == 0) { oBtn[i].onclick = function() { that.disGoods(this); } } else { oBtn[i].onclick = function() { that.addGoods(this); } } } let oDel = document.querySelectorAll(".del"); for (let i = 0; i < oDel.length; i++) { oDel[i].onclick = function() { that.delGoods(this); } } } } let c = new Cart(); class Store { constructor(oCart, oStore) { this.oCart = oCart; this.oStore = oStore; this.eventBind(); } addCart(btn) { //生成tr节点并连接节点 let oTr = document.createElement("tr"); this.oCart.appendChild(oTr); //获取商品名并给拼接购物车添加赋值 let oName = btn.parentNode.parentNode.firstElementChild.innerHTML; oTr.innerHTML = `<td>${oName}</td>`; //给购物车拼接添加数量 oTr.innerHTML += `<td><button type="button">-</button><span class="num">0</span><button type="button">+</button></td>`; //获取商品价格并拼接给购物车添加单价 let oPrice = btn.parentNode.previousElementSibling.firstElementChild.innerHTML; oTr.innerHTML += `<td>单价:<span class="price">${oPrice}</span></td>`; //给购物车拼接添加小计 oTr.innerHTML += `<td>小计:<span class="sum">0</span></td>`; //给购物车拼接添加操作项 oTr.innerHTML += `<td>操作<input class="del" type="button" value="删除" /></td>`; //更新 c.eventBind(); c.getGoodsNum(); c.getGoodsPrice(); } eventBind() { //获取添加 let oBtn = document.querySelectorAll(".add"); let that = this; for (let i = 0; i < oBtn.length; i++) { oBtn[i].onclick = function() { //记录要添加的数据在购物车中是否存在 let flag = false; //若商品已出现过,记录下标,定义一个变量 let h = 0; //获取购物车的数据 let oCartNum = that.oCart.children; //购物车为空时直接添加 if (oCartNum.length == 0) { that.addCart(this); } else { //购物车不为空时 for (let j = 0; j < oCartNum.length; j++) { //获取要添加的商品名 let oStoreName = this.parentNode.parentNode.firstElementChild.innerHTML; //获取购物车中的商品名 let oCartName = oCartNum[j].firstElementChild.innerHTML; //要添加的商品没有出现过 if (oStoreName != oCartName) { flag = true; } else { //要添加的商品已经出现过,记录此条数据在购物车中的下标,并跳出循环 flag = false; h = j; break; } } if (flag == true) { that.addCart(this); //添加数据 } else { //增加数量 c.addGoods(oCartNum[h].firstElementChild.nextElementSibling.lastElementChild); } } } } } } let oCart = document.querySelector(".cart"); let oStore = document.querySelector(".store"); let s = new Store(oCart, oStore); </script>