JS代码写简单购物车

最新推荐文章于 2024-03-18 23:01:18 发布

柠檬味的融融521

最新推荐文章于 2024-03-18 23:01:18 发布

阅读量1.9k

点赞数 2

分类专栏：小菜鸟学习大本领文章标签： javascript vue.js html css 前端

本文链接：https://blog.csdn.net/m0_64054560/article/details/124895845

版权

小菜鸟学习大本领专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现效果：

CSS样式：

<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: 1.5rem auto;
            border-collapse: collapse;
            border: .1rem solid gray;
        }

        th {
            background: yellow;
            height: 1rem;
            border: .1rem solid gray;
        }

        tr {
            height: 1rem;
            text-align: center;
        }

        td {
            border: .1rem solid gray;
        }
    </style>
</head>

HTML代码：

<body>
    <table>
        <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>5</span>
            </td>
            <td>
                小计：<span class="goods-subtotal">0</span>
            </td>
            <td>
                操作：<input type="button" value="删除">
            </td>
        </tr>
        <tr>
            <td>樱桃</td>
            <td>
                <button>-</button>
                <span class="goods-num">0</span>
                <button>+</button>
            </td>
            <td>
                单价：<span>10</span>
            </td>
            <td>
                小计：<span class="goods-subtotal">0</span>
            </td>
            <td>
                操作：<input type="button" value="删除">
            </td>
        </tr>
        <tr>
            <td colspan="5">一共<span class="goods-total-num">0</span>件商品，一共<span class="goods-total-price">0</span>元</td>
        </tr>
    </table>
</body>

JS代码：

<script>
    class Cart {
        //更新总数
        updateGoodsTotalNum() {
            //获取到数量中间的数字==数组中保存
            let oGoodsNum = document.getElementsByClassName("goods-num")
            //设置总数量的初始数字为0
            let goodsTotalNum = 0;
            //总的数量是将所有的商品数量加起来
            for (let i = 0; i < oGoodsNum.length; i++) {
                goodsTotalNum += oGoodsNum[i].innerHTML / 1;
            }
            //获取到总数的这个span标签，注意是class名，要打点
            let oGoodsTotalNum = document.querySelector(".goods-total-num");
            //总数的值=累加起来的goodsTotalNum
            oGoodsTotalNum.innerHTML = goodsTotalNum;
        }
        //更新商品总价格
        updateGoodsTotalPrice() {
            //获取到小结中间的数字
            let oGoodsSubtotal = document.getElementsByClassName("goods-subtotal");
            //给总价钱设置初始值为0
            let goodsTotalprice = 0;
            //总的钱数是将所有的商品钱数加起来
            for (let i = 0; i < oGoodsSubtotal.length; i++) {
                goodsTotalprice += oGoodsSubtotal[i].innerHTML / 1;
            }
            //获取到总钱数的这个span标签，注意是class名，要打点
            let oGoodsTotalprice = document.querySelector(".goods-total-price");
            //总钱数的值=累加起来的goodsTotalprice
            oGoodsTotalprice.innerHTML = goodsTotalprice;
        }
        //添加货物
        //btn就是被点击的元素
        addGoods(btn) {
            //1数量
            //找到在+号按钮的上一个兄弟节点
            let oGoodsNum = btn.previousElementSibling;
            //商品的数量=原来商品的数量+1；
            oGoodsNum.innerHTML = oGoodsNum.innerHTML / 1 + 1;
            //2小计=数量*单价
            //找到+号按钮的父节点的下一个节点的第一个孩子，就是相当于是找到了单价这个需要改的数字
            let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild;
            //就是相当于是找到了小计这个需要改的数字
            let oGoodsSubtotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
            oGoodsSubtotal.innerHTML = oGoodsNum.innerHTML * oGoodsPrice.innerHTML;
            //3总个数
            this.updateGoodsTotalNum();
            //4总价
            this.updateGoodsTotalPrice();
        }

        minGoods(btn) {
            let oGoodsNum = btn.nextElementSibling;
            //如果商品的数量大于0
            if (oGoodsNum.innerHTML > 0) {
                //商品的数量在原数量的基础上减一
                oGoodsNum.innerHTML = oGoodsNum.innerHTML / 1 - 1;
                //找到单价的
                let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild;
                //找到小结的
                let oGoodsSubtotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
                //小结=数目*单价
                oGoodsSubtotal.innerHTML = oGoodsNum.innerHTML * oGoodsPrice.innerHTML;
                // 3.总数
                this.updateGoodsTotalNum();
                // 4.总价
                this.updateGoodsTotalPrice();
            }
        }

        //删除按钮
        delGoods(btn) {
            //找到删除按钮的父的父，就相当于是要被删除的这一行
            let oTr = btn.parentNode.parentNode;
            //将这一行删除
            oTr.remove();
            //调用计算总数和总价的，重新计算
            this.updateGoodsTotalNum();
            this.updateGoodsTotalPrice();
        }


        evenBind() {
            //找到 -和+的按钮
            let oBtns = document.getElementsByTagName("button");
            //遍历找到所点击的
            let that = this;
            for (let i = 0; i < oBtns.length; i++) {
                //如果索引是偶数的话，是-
                if (i % 2 == 0) {
                    oBtns[i].onclick = function () {
                        that.minGoods(this)
                    }
                } else {
                    //如果索引是奇数的话，是+
                    oBtns[i].onclick = function () {
                        that.addGoods(this)
                    }
                }
            }

            
            //找到删除的按钮
            let delBtns = document.getElementsByTagName("input");
            //遍历，看点击的是哪一个删除
            for (let i = 0; i < delBtns.length; i++) {
                delBtns[i].onclick = function () {
                    that.delGoods(this);
                }
            }
        }
    }
    let c = new Cart();
    c.evenBind();

</script>