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

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

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

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 = "";
        }