原生JavsScript實現簡單購物車【面向物件】【原生程式碼】
阿新 • • 發佈：2020-08-01
原生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>
好了，全部的功能已經實現了，這是利用原生程式碼實現的簡易購物車，當然如果有需求也可以寫的更炫酷一點；