js面向对象实现简易购物车

<!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;
            margin: 0 auto;
        }

        table {
            width: 50%;
            margin-top: 30px;
        }

        th {
            background-color: rgb(7, 243, 38);
        }

        th,
        tr {
            height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table border="1px" cellspacing="0" cellspacing="0">
        <tr>
            <th>商品名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>水煮鱼</td>
            <td><button>-</button><span class="goods-num">0</span><button>+</button></td>
            <td>单价:<span class="goods-price">50</span></td>
            <td>小计:<span class="goods-single-price">0</span></td>
            <td>操作:<input type="button" value="删除" class="sel"></td>
        </tr>
        <tr>
            <td>油焖大虾</td>
            <td><button>-</button><span class="goods-num">0</span><button>+</button></td>
            <td>单价:<span class="goods-price">100</span></td>
            <td>小计:<span class="goods-single-price">0</span></td>
            <td>操作:<input type="button" value="删除" class="sel"></td>
        </tr>
        <tr>
            <td colspan="5">一共<span id="goods-total-num">0</span>件商品,共计花费<span id="goods-total-price">0</span>元</td>
        </tr>
    </table>
</body>

</html>
<script>
    class Cart {
        //计算共有多少件商品
        getGoodsnum() {
            let OGoodsnum = document.getElementsByClassName("goods-num");
            let goodstotalnum = 0;
            for (let i = 0; i < OGoodsnum.length; i++) {
                goodstotalnum += Number(OGoodsnum[i].innerHTML);
            }
            let oGoodstotalnum = document.querySelector("#goods-total-num");
            oGoodstotalnum.innerHTML = goodstotalnum;
        }
        //计算共花费多少
        getGoodsPrice() {
            let Ogoodssingleprice = document.getElementsByClassName("goods-single-price");
            let goodstotalprice = 0;
            for (var i = 0; i < Ogoodssingleprice.length; i++) {
                goodstotalprice += Number(Ogoodssingleprice[i].innerHTML);
            }
            let Ogoodstotalprice = document.querySelector("#goods-total-price");
            Ogoodstotalprice.innerHTML = goodstotalprice;
        }
        //计算小计
        getGoodsSinglePrice(num, price) {
            return num * price;
        }
        //增加货物数量
        Goodadd(btn) {
            //获取btn前的货物数量
            let goodsnum = btn.previousElementSibling;
            goodsnum.innerHTML = Number(goodsnum.innerHTML) + 1;
            //获取单价
            let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML;
            //计算小计
            let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice);//50
            let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
            goodssingleprice.innerHTML = Ogoodssinglepc;
            //点击增加数量的同时,总数量和总价也要变化
            this.getGoodsnum();
            this.getGoodsPrice();
        }
        //减少货物数量
        Goodmin(btn) {
            //获取btn前的货物数量
            let goodsnum = btn.nextElementSibling;
            goodsnum.innerHTML = Number(goodsnum.innerHTML) - 1;
            //获取单价
            let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML;
            //计算小计
            let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice);//50
            let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
            goodssingleprice.innerHTML = Ogoodssinglepc;
            //点击增加数量的同时,总数量和总价也要变化
            this.getGoodsnum();
            this.getGoodsPrice();
        }
        //删除事件
        select(sel) {
            let otr = sel.parentNode.parentNode;
            otr.remove();
            //点击删除的同时,总数量和总价也要变化
            this.getGoodsnum();
            this.getGoodsPrice();

        }
        //测试绑定事件
        testbtn() {
            let obtn = document.querySelectorAll("button");
            let that = this;
            for (let i = 0; i < obtn.length; i++) {
                if (i % 2 == 1) {
                    obtn[i].onclick = function () {
                        that.Goodadd(this);
                    }
                } else {
                    obtn[i].onclick = function () {
                        that.Goodmin(this);
                    }
                }
            }
        }
        //删除事件
        selbtn() {
            let oselbtn = document.querySelectorAll(".sel");
            let that = this;
            for (let i = 0; i < oselbtn.length; i++) {
                oselbtn[i].onclick = function () {
                    that.select(this);
                }
            }
        }
    }
    var ca = new Cart();
    //必须调用才有效果
    ca.selbtn();
    ca.testbtn()

</script>
js面向对象实现简易购物车

js面向对象实现简易购物车

上一篇:Android--SharedPreferences数据存储方案


下一篇:HTML基础02