简单购物车案例

最新推荐文章于 2022-05-05 17:11:21 发布

The time，

最新推荐文章于 2022-05-05 17:11:21 发布

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/weixin_44130041/article/details/100118284

版权

这里是css样式

<style>
    table {
        width: 1000px;
        margin: 0 auto;
        border-collapse: collapse;
    }
    td {
        width: 150px;
        border: 1px solid skyblue;
        line-height: 30px;
        text-align: center;
    }
    .btnl,
    .btnr {
        border-style: none;
        outline: none;
        color: purple;
    }
    .txt {
        width: 30px;
        height: 30px;
        border-style: none;
        outline: none;
        text-align: center;
    }
</style>

这里是html文件

<body>
<table>
    <tr>
        <td><button id="checkAll">全选</button></td>
        <td>名称</td>
        <td>价钱</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
    </tr>
    <tr class="trlist">
        <td><input type="checkbox" class="box"></td>
        <td>篮球</td>
        <td><span class="price">99</span>￥</td>
        <td><button class="btnl">-</button><input type="text" class="txt" value="1"><button class="btnr">+</button>
        </td>
        <td><span class="smallprice">99</span>￥</td>
        <td><button class="kill">删除</button></td>
    </tr>
    <tr class="trlist">
        <td><input type="checkbox" class="box"></td>
        <td>羽毛球</td>
        <td><span class="price">36</span>￥</td>
        <td><button class="btnl">-</button><input type="text" class="txt" value="1"><button class="btnr">+</button>
        </td>
        <td><span class="smallprice">36</span>￥</td>
        <td><button class="kill">删除</button></td>
    </tr>
    <tr class="trlist">
        <td><input type="checkbox" class="box"></td>
        <td>乒乓球</td>
        <td><span class="price">16</span>￥</td>
        <td><button class="btnl">-</button><input type="text" class="txt" value="1"><button class="btnr">+</button>
        </td>
        <td><span class="smallprice">16</span>￥</td>
        <td><button class="kill">删除</button></td>
    </tr>
    <tr class="trlist">
        <td><input type="checkbox" class="box"></td>
        <td>球拍</td>
        <td><span class="price">46</span>￥</td>
        <td><button class="btnl">-</button><input type="text" class="txt" value="1"><button class="btnr">+</button>
        </td>
        <td><span class="smallprice">46</span>￥</td>
        <td><button class="kill">删除</button></td>
    </tr>
    <tr class="trlist">
        <td><input type="checkbox" class="box"></td>
        <td>排球</td>
        <td><span class="price">106</span>￥</td>
        <td><button class="btnl">-</button><input type="text" class="txt" value="1"><button class="btnr">+</button>
        </td>
        <td><span class="smallprice">106</span>￥</td>
        <td><button class="kill">删除</button></td>
    </tr>
    <tr>
        <td><button id="unCheckAll">反选</button></td>
        <td colspan="6"><span>总计：<span id="priceAll">0</span>￥</span><button>去结算</button></td>
    </tr>
</table>
</body>

这里是JS文件

<script>
    //获取全选反选按钮和选择框
    var checkAll = document.getElementById("checkAll")
    var unCheckAll = document.getElementById("unCheckAll")
    var box = document.getElementsByClassName("box")
    //获取加减的按钮集合
    var btnl = document.getElementsByClassName("btnl")
    var btnr = document.getElementsByClassName("btnr")
    //获取表示单价的class名为price的span元素集合
    var price = document.getElementsByClassName("price")
    //获取表示小计的class名为smallprice的span元素集合
    var smallprice = document.getElementsByClassName("smallprice")
    //获取表示数量的class名为txt的input元素集合
    var txt = document.getElementsByClassName("txt")
    //获取表示总价的class名为priceAll的span元素
    var priceAll = document.getElementById("priceAll")
    //定义全局变量num的初值为0
    var num = 0
    //获取表格中的每一行
    var trlist = document.getElementsByClassName("trlist")
    //获取删除按钮
    var kill = document.getElementsByClassName("kill")
    //给数量左右两边的+-添加点击事件
    for (var i = 0; i < btnl.length; i++) {
        btnl[i].index = i; //把i的值赋给btnl[i]的index
        btnl[i].onclick = function () {
            //获取当前对应的文本框的值
            var val = txt[this.index].value
            val--
            //控制其数量的值不能小于1
            if (val <= 1) {
                val = 1
            }
            txt[this.index].value = val //把更新了的val值再赋给txt[this.index].value
            addPrice(this.index) //调用一下addprice()使其在当前变化下执行
            addPriceAll()
        }
        btnr[i].index = i; //把i的值赋给btnr[i]的index
        btnr[i].onclick = function () {
            var val = txt[this.index].value
            val++
            txt[this.index].value = val
            addPrice(this.index)
            addPriceAll()
        }
        //给checkbox添加点击事件
        box[i].onclick = function () {
            addPriceAll()
        }
        //给删除添加点击事件
        kill[i].index = i
        kill[i].onclick = function () {
            num -= parseFloat(smallprice[this.index].innerText) //将总计里面对应的价格也减掉
            priceAll.innerText = num
            trlist[this.index].remove() //去掉对应的那一行元素
            //重新更新索引  防止其他操作出错
            for (var j = 0; j < trlist.length; j++) {
                btnl[j].index = j
                btnr[j].index = j
                kill[j].index = j
                trlist[j].index = j
            }
            addPriceAll()
        }
    }
    //计算小计
    function addPrice(index) {
        smallprice[index].innerText = price[index].innerText * txt[index].value
    }
    //计算总计
    function addPriceAll() {
        num = 0
        for (var i = 0; i < btnl.length; i++) {
            if (box[i].checked) {
                num += parseFloat(smallprice[i].innerText)
            }
        }
        priceAll.innerText = num
    }
    //全选
    checkAll.onclick = function () {
        for (var i = 0; i < box.length; i++) {
            box[i].checked = true
        }
        addPriceAll()
    }
    //反选
    unCheckAll.onclick = function () {
        for (var i = 0; i < box.length; i++) {
            box[i].checked = false
        }
        addPriceAll()
    }
</script>