简易购物车

效果图 

 所需图片

 

 

 

 html部分

 <div class="wrapper">
        <button onclick="window.close()" id="btw">关闭</button>
        <button id="btw1" onclick="a()">结算</button>
        <table border="1">
            <tr>
                <td colspan="6"><img src="./images/dd_logo.jpg" alt="" id="pic"></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="all"></td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1"></td>
                <td><img src="./images/dog.jpg" alt=""></td>
                <td>500</td>
                <td style="width: 225px;">
                    <button class="minus cal">-</button>
                    <input type="text" value="1">
                    <button class="add cal">+</button>
                </td>
                <td>500</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" value="1"></td>
                <td><img src="./images/mai.jpg" alt=""></td>
                <td>100</td>
                <td>
                    <button class="minus cal">-</button>
                    <input type="text" value="1">
                    <button class="add cal">+</button>
                </td>
                <td>100</td>
                <td><button class="del">删除</button></td>
            </tr>
            <tr>
                <td colspan="3">总计</td>
                <td colspan="3" id="sumTotal"></td>
            </tr>
        </table>
    </div>

css部分

<style>
        img {
            width: 50px;
        }

        #pic {
            height: 80px;
            width: 300px;
        }
        .wrapper{
            width: 430px;
            height: 332px;
            position: relative;
        }
        #btw{
            top: 20px;
            right: 20px;
            width: 80px;
            height: 40px;
            border-radius: 15px;
            position: absolute;
            background-color: rgb(206, 96, 23);
        }
        #btw1{
            right: 10px;
            bottom: 2px;
            width: 80px;
            height: 24px;
            border-radius: 8px;
            position: absolute;
            background-color: rgb(206, 96, 23);
        }
    </style>

js部分

<script>
        let _cals = document.querySelectorAll('.cal');
        _cals.forEach(_cal => {
            _cal.onclick = function () {
                //获取操作符
                let opera = this.innerHTML;
                //获取数量
                let _input = this.parentNode.children[1];
                //减1
                if (_input.value * 1 <= 1 && opera == '-') {
                    return;
                }
                //执行加减
                let num = eval(_input.value * 1 + opera + 1);
                _input.value = num
                //计算小计
                //单价
                let price = this.parentNode.previousElementSibling.innerText * 1;
                let total = price * num; //小计
                this.parentNode.nextElementSibling.innerText = total;

                //重新计算
                sumTotal()
            }
        })

        //全选
        let _all = document.querySelector('#all');
        //所有反选框
        let _chboxes = document.querySelectorAll('input[type=checkbox]:not(#all)');
        _all.onchange = function () {
            _chboxes.forEach(_chbox => {
                _chbox.checked = this.checked;
            })
            //重新计算
            sumTotal();
        }


        //反选
        _chboxes.forEach(_chbox => {
            _chbox.onchange = function () {
                //获取待checked的属性的所有input框
                let _checkedboxes = document.querySelectorAll('input:checked:not(#all)');
                _all.checked = _checkedboxes.length == _chboxes.length
                //重新计算
                sumTotal()
            }
        })

        //计算总计
        let _sumTotal = document.querySelector('#sumTotal')
        function sumTotal() {
            //获取带有checked属性的小计
            let _checkedboxes = document.querySelectorAll('input:checked:not(#all)')
            let sumTotal = 0;//总计
            _checkedboxes.forEach(_checkedbox => {
                sumTotal += _checkedbox.parentNode.parentNode.children[4].innerHTML * 1
            })
            //存放总计
            _sumTotal.innerText = sumTotal;
        }

        //删除
        let _dels = document.querySelectorAll(".del");
        _dels.forEach(_del => {
            _del.onclick = function () {
                if (confirm("确认删除吗?")) {
                    _del.parentNode.parentNode.remove();
                    //重新计算总计
                    sumTotal();
                }
            }

        })
        //跳转结算
        function a(){
            location.href="http://www.jd.com";
        }

    </script>

以上就是建议购物车全部代码。