原生JavaScript购物车功能（有图）

主要运用了事件委托、面向过程的编程思想

商品的添加和删除功能；商品的小计和商品的总计；总商品的总数量和总价格；简易的添加商品和计算价格功能；

style块

* { margin: 0; padding: 0; } input { outline: none; } table { width: 50%; position: relative; margin: 50px auto; border-collapse: collapse; border: 1px solid gray; } th { background: lightblue; height: 30px; margin: 0 auto; padding: 10px; } td { padding: 10px; } tr { height: 30px; margin: 0 auto; text-align: center; } .cart input { width: 60px; height: 30px; } .cart button { font-size: 15px; width: 30px; height: 30px; } .TOTALPrice, .TOTALCount { color: red; } .count { font-size: 20px; } div { width: 50%; margin: 50px auto; } .wrap input { height: 25px; }

html块

<table border="1" cellspacing="0" cellpadding="0" class="cart"> <div class="wrap"> <input type="text" id="newFoodName" placeholder="请输入要添加的新菜品"> <input type="number" id="newFoodPrice" placeholder="价格" min="0"> <button id="submit">添加</button> </div> <thead> <tr> <th>商品名称</th> <th>数量</th> <th>单价</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>烤羊肉</td> <td> <button class="remove"> - </button> <span class="count">0</span> <button class="add"> + </button> </td> <td> 单价:￥<span class="price">25</span> </td> <td> 小计:￥<span class="totalPrice">0</span> </td> <td> 操作: <input type="button" value="删除" class="deleteItem"> </td> </tr> <tr> <td>烤生蚝</td> <td> <button class="remove"> - </button> <span class="count">0</span> <button class="add"> + </button> </td> <td> 单价:￥<span class="price">10</span> </td> <td> 小计:￥<span class="totalPrice">0</span> </td> <td> 操作: <input type="button" value="删除" class="deleteItem"> </td> </tr> <tr> <td>烤鸡排</td> <td> <button class="remove"> - </button> <span class="count">0</span> <button class="add"> + </button> </td> <td> 单价:￥<span class="price">15.5</span> </td> <td> 小计:￥<span class="totalPrice">0</span> </td> <td> 操作: <input type="button" value="删除" class="deleteItem"> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5"> 一共 <span class="TOTALCount">0</span>件商品，共计花费 ￥<span class="TOTALPrice">0</span> 元。 </td> </tr> </tfoot> </table>

JavaScript块

//获取父级元素的节点，方便对子元素的操作 let tbody = document.querySelectorAll(".cart tbody")[0]; tbody.onclick = function (ev) { //时间委托 _this = ev.target; //商品的添加 if (_this.className === "add") { let count = parseInt(_this.parentNode.querySelectorAll(".count")[0].innerHTML) + 1; _this.parentNode.querySelectorAll(".count")[0].innerHTML = count; //调用商品小计 computedTotalPrice(_this); //调用商品的总数量 computedTotalCount(); //调用商品的总价格 computedTotalPrices(); } //商品的删除 if (_this.className === "remove") { let count = parseInt(_this.parentNode.querySelectorAll(".count")[0].innerHTML) - 1; _this.parentNode.querySelectorAll(".count")[0].innerHTML = count; if (_this.parentNode.querySelectorAll(".count")[0].innerHTML <= 0) { _this.parentNode.querySelectorAll(".count")[0].innerHTML = 0; } //调用商品小计 computedTotalPrice(_this); //调用商品的总数量 computedTotalCount(); //调用商品的总价格 computedTotalPrices(); } //删除某一商品 if (_this.className === "deleteItem") { //友情提示一下 if (confirm("您确定要删除吗？")) { _this.parentNode.parentNode.parentNode.removeChild(_this.parentNode.parentNode); } //调用商品的总数量 computedTotalCount(); //调用商品的总价格 computedTotalPrices(); } //商品小计 function computedTotalPrice() { //获取每行中所添加的商品的数量 let counts = parseInt(_this.parentNode.querySelectorAll(".count")[0].innerHTML); //获取每个商品的单价 let price = parseFloat(_this.parentNode.parentNode.querySelectorAll(".price")[0].innerHTML); //获取每个商品的小计中的值 let totalPrice = parseFloat(_this.parentNode.parentNode.querySelectorAll(".totalPrice")[0] .innerHTML); //商品小计并重新赋值 //商品小计 = 商品数量 * 商品单价 _this.parentNode.parentNode.querySelectorAll(".totalPrice")[0].innerHTML = counts * price; } //商品总计数量 function computedTotalCount() { //获取每行商品的数量 let count = document.querySelectorAll(".count"); let totalCounts = 0; //遍历每行商品的数量并赋值 for (let i = 0; i < count.length; i++) { //总数量 = 每行的商品数量相加 totalCounts += Number(count[i].innerHTML); } //赋值给页面中的商品总数量 let TOTALCount = document.querySelectorAll(".TOTALCount")[0]; TOTALCount.innerHTML = totalCounts; } //商品总计价格 function computedTotalPrices() { //获取每行商品的价格 let price = document.querySelectorAll(".totalPrice"); let totalPrices = 0; //遍历每行商品的小计并赋值 for (let j = 0; j < price.length; j++) { //总价格 = 每行的商品小计相加 totalPrices += Number(price[j].innerHTML); } //赋值给页面中的商品总价格 let TOTALPrice = document.querySelectorAll(".TOTALPrice")[0]; TOTALPrice.innerHTML = totalPrices; } } //插入菜品 let submits = document.getElementById("submit"); submits.onclick = function () { //获取输入框节点 let newFoodName = document.getElementById("newFoodName"); let newFoodPrice = document.getElementById("newFoodPrice"); //获取页面中已有的第一个商品 newtr = document.querySelectorAll("tr")[1]; //克隆页面中已有的某一个商品 let newItem = newtr.cloneNode(true); //克隆的商品名称等于输入框中输入的值 newItem.getElementsByTagName("td")[0].innerHTML = newFoodName.value; newItem.querySelector(".price").innerHTML = newFoodPrice.value; //把克隆的插入到tbody中的最后一个节点 tbody.appendChild(newItem, tbody.getElementsByTagName("tr")[tbody .getElementsByTagName("tr").length - 1]); //添加成功后清空输入框中文本 newFoodName.value = ""; newFoodPrice.value = ""; }