小试购物车,熟练一下dom的增删改查

最近疫情影响很大,在家也出不去,只能学习啦,下面是效果,废话不多说,直接上代码

ps:明天我会继续改进,后续我会继续改进购物车以及服务器版本的购物车

 小试购物车,熟练一下dom的增删改查

 

 

<!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>

 

上一篇:popper的几种用法


下一篇:vue中this.$nextTick()的作用和用法