原生JavsScript实现简单购物车面向对象原生代码
Posted xxmx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JavsScript实现简单购物车面向对象原生代码相关的知识，希望对你有一定的参考价值。
原生js实现购物车功能 —面向对象；
购物车在电商网站基本都需要用到，今天我们用面向对象编程思想来写一个购物车
首先，我们先来看一下要实现的效果：
我们来从明面上分析下这个程序的需求：
1.购物车肯定要有增加以及减少货物数量的功能；
2.具有删除货物的功能
3.添加菜单的功能
这是我们可以看到的功能，那么现在开始上代码吧；
我们先完成html页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } table { width: 800px; text-align: center; margin: 40px auto; border: 1px solid black; } th { height: 50px; background: #98FB98; border: 1px solid black; } td { height: 50px; border: 1px solid black; } button { width: 20px; height: 20px; } </style> </head> <body> <table class="tab"> <tr> <th>序号</th> <th>商品名称</th> <th>数量</th> <th>单价</th> <th>小计</th> <th>操作</th> </tr> <tr> <td class="other">1</td> <td class="MenuName">麻辣香锅</td> <td><button>-</button><span class="numberOf">0</span><button>+</button></td> <td>单价：<span>18</span></td> <td>小计：<span class="HowSubtotal">0</span></td> <td>操作：<input type="button" value="删除" class="del"></td> </tr> <tr> <td class="other">2</td> <td class="MenuName">红烧排骨</td> <td><button>-</button><span class="numberOf">0</span><button>+</button></td> <td>单价：<span>25</span></td> <td>小计：<span class="HowSubtotal">0</span></td> <td>操作：<input type="button" value="删除" class="del"></td> </tr> <tr> <td colspan="6"> 商品一共<span id="ToNumber">0</span>件，共<span id="ToMoney">0</span>元; </td> </tr> </table> <table cellspacing="0"> <tr> <th>序号</th> <th>商品名称</th> <th>单价</th> <th>操作</th> </tr> <tr> <td>1</td> <td>回锅肉</td> <td>单价：<span>19</span></td> <td>操作：<input type="button" value="添加" class="add"></td> </tr> <tr> <td>2</td> <td>青椒肉丝</td> <td>单价：<span>12</span></td> <td>操作：<input type="button" value="添加" class="add"></td> </tr> </table> </body> </html>
它现在就是这个样子：
现在给他添加javascript代码让他动起来
<script> class ShoppingCart { //获取数量 NumberOf() { let numberOf = document.getElementsByClassName("numberOf");//获取商品页面商品数量 let oNumber = 0;//给数量一个初始化值 for (let i = 0; i < numberOf.length; i++) { oNumber += Number(numberOf[i].innerHTML);//拿到总数量=各个商品数量加起来 } // 总数量 let ToNumber = document.getElementById("ToNumber"); ToNumber.innerHTML = oNumber; } //获取金额 HowMoney() { let HowSubtotal = document.getElementsByClassName("HowSubtotal"); let oHowSubtotal = 0; for (let i = 0; i < HowSubtotal.length; i++) { oHowSubtotal += Number(HowSubtotal[i].innerHTML); } let ToMoney = document.getElementById("ToMoney"); ToMoney.innerHTML = oHowSubtotal; } //小计 Tosubtotal(num, price) { return num * price;//小计=数量*单价 } //计算增加 increase(btn) { //数量//通过点击的节点获取 let NumberOf = btn.previousElementSibling; NumberOf.innerHTML = Number(NumberOf.innerHTML) + 1; //单价 let price = btn.parentNode.nextElementSibling.firstElementChild; //小计 let subtotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild; subtotal.innerHTML = this.Tosubtotal(NumberOf.innerHTML, price.innerHTML); this.NumberOf(); this.HowMoney(); } // 计算减少 toReduce(btn) { let NumberOf = btn.nextElementSibling; //数量 if (NumberOf.innerHTML > 0) { NumberOf.innerHTML = NumberOf.innerHTML - 1; //单价 let price = btn.parentNode.nextElementSibling.firstElementChild; //小计 let subtotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild; subtotal.innerHTML = this.Tosubtotal(NumberOf.innerHTML, price.innerHTML); this.NumberOf(); this.HowMoney(); } } //删除 Dele(btn) { let oTr = btn.parentNode.parentNode; oTr.remove(); this.NumberOf();//删除之后数量会变化所以需要调用数量 this.HowMoney();//删除之后金额会变化所以要调用金额 this.other();//调用序号 } //增加菜单 increaseMenu(btn) { // 获取表格 let oTabl = document.querySelector(".tab"); // 获取第一个元素 let firstChi = oTabl.firstElementChild; // 获取最后一个元素 let lastChi = firstChi.lastElementChild; // 获取商品名称 let goodsName = btn.parentNode.previousElementSibling.previousElementSibling; // 获取价格 let googsMoney = btn.parentNode.previousElementSibling.firstElementChild; // 创建tr let oTr = document.createElement("tr"); // 添加内容 oTr.innerHTML = `<td class="other"></td> <td class="MenuName">${goodsName.innerHTML}</td> <td><button>-</button><span class="numberOf">0</span><button>+</button></td> <td>单价：<span>${googsMoney.innerHTML}</span></td> <td>小计：<span class="HowSubtotal">0</span></td> <td>操作：<input type="button" value="删除" class="del"></td>` this.eventAdd();//调用事件 let flag = false; let MenuName = document.getElementsByClassName("MenuName");//获取商品名称 for (let i = 0; i < MenuName.length; i++) { if (MenuName[i].innerHTML == goodsName.innerHTML) {//判断是否有相同的名称/如果有就数量+1，然后结束循环 flag = true; let NumberOf = MenuName[i].nextElementSibling.firstElementChild.nextElementSibling; NumberOf.innerHTML = Number(NumberOf.innerHTML) + 1; let toSubtotal = NumberOf.parentNode.nextElementSibling.nextElementSibling.firstElementChild; toSubtotal.innerHTML = this.Tosubtotal(NumberOf.innerHTML, googsMoney.innerHTML); this.NumberOf(); this.HowMoney(); break; } } if (!flag) { firstChi.insertBefore(oTr, lastChi);//如果没有就新添加一行 this.other(); this.eventAdd(); } } //序号 other() { let other = document.getElementsByClassName("other"); for (let i = 0; i < other.length; i++) { other[i].innerHTML = i + 1; } } //事件 eventAdd() { let that = this; //增加/减少商品 let oBtn = document.getElementsByTagName("button") for (let i = 0; i < oBtn.length; i++) { if (i % 2) { oBtn[i].onclick = function () { that.increase(this); console.log("abc") } } else { oBtn[i].onclick = function () { that.toReduce(this); console.log("abc") } } } //删除 let oDel = document.getElementsByClassName("del"); for (let i = 0; i < oDel.length; i++) { oDel[i].onclick = function () { that.Dele(this); } } //添加菜单 let add = document.getElementsByClassName("add"); for (let i = 0; i < add.length; i++) { add[i].onclick = function () { that.increaseMenu(this); } } } } let a = new ShoppingCart();
a.eventAdd();
</script>
好了，全部的功能已经实现了，这是利用原生代码实现的简易购物车，当然如果有需求也可以写的更炫酷一点；
以上是关于原生JavsScript实现简单购物车面向对象原生代码的主要内容，如果未能解决你的问题，请参考以下文章