js实现简单的购物车 有图有代码

用JavaScript实现静态购物车功能

要求：
点击+号数量增加，点击-号数量递减；
实现全选、反选和删除功能；
求出小计、总数量和总价；

看效果图

• CSS样式

<style>
        table{
            width: 900px;
            border-collapse: collapse;
            margin: 0 auto;
        }
        th{      
            border-top: 3px solid #a7cbff;
            background: #e2f2ff;
            text-align: center;
        }
        td{
            height: 80px;
            border: 1px solid #CADEFF;
            text-align: center;
            color: rgb(167, 159, 159);
            font-size: 14px;
        }
        tr:hover{
            background-color:#e2f2ff;
        }
        .count-input{
            width: 50px;
            text-align: center;
            height: 21px;
  

        }
        #foot td{
            height: 30px;
        }
        .reduce{
            position: relative;
            left: 5px;
            bottom: 2px;
        }
        .add{
            position: relative;
            right: 5px;
            bottom: 2px;
        }
        .reduce,.add{
            display: inline-block;
            width: 20px;
            height: 25px;
            background-color: #ccc;
            color: white;
            cursor: pointer;
        }
        span{
            cursor: pointer;
        }
        #allPrice{
            display: inline-block;
            width: 50px;
        }
        tfoot tr td{
            text-align: left;
        }
    </style>

• body部分

    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="ckAll" onclick="checkAll()">全选</th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="inline">
                <td><input type="checkbox" name="ck" onclick="check()"></td>
                <td>Casio/卡西欧 EX-TR350</td>
                <td>5999.88</td>
                <td>
                    <span class="reduce" onclick="reduceCount(this)">-</span>
                    <input type="text" value="1" class="count-input">
                    <span class="add" onclick="addCount(this)">+</span>
                </td>
                <td>5999.88</td>
                <td>
                    <span class="delete" onclick="del(this)">删除</span>
                </td>
            </tr>
            <tr class="inline">
                <td><input type="checkbox" name="ck" onclick="check()"></td>
                <td>Canon/佳能 PowerShot SX50 HS</td>
                <td>3888.50</td>
                <td>
                    <span class="reduce" onclick="reduceCount(this)">-</span>
                    <input type="text" value="1" class="count-input">
                    <span class="add" onclick="addCount(this)">+</span>
                </td>
                <td>3888.50</td>
                <td>
                    <span class="delete" onclick="del(this)">删除</span>
                </td>
            </tr>
            <tr class="inline">
                <td><input type="checkbox" name="ck" onclick="check()"></td>
                <td>Sony/索尼 DSC-WX300</td>
                <td>1428.50</td>
                <td>
                    <span class="reduce" onclick="reduceCount(this)">-</span>
                    <input type="text" value="1" class="count-input">
                    <span class="add" onclick="addCount(this)">+</span>
                </td>
                <td>1428.50</td>
                <td>
                    <span class="delete" onclick="del(this)">删除</span>
                </td>
            </tr>
            <tr class="inline">
                <td><input type="checkbox" name="ck" onclick="check()"></td>
                <td>Fujifilm/富士 instax mini 25</td>
                <td>640.60</td>
                <td>
                    <span class="reduce" onclick="reduceCount(this)">-</span>
                    <input type="text" value="1" class="count-input">
                    <span class="add" onclick="addCount(this)">+</span>
                </td>
                <td>640.60</td>
                <td>
                    <span class="delete" onclick="del(this)">删除</span>
                </td>
            </tr>
        </tbody>  
        <tfoot id="foot">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>总数：<span id="allCount"></span></td>
            <td>总价：<span id="allPrice"></span></td>
        </tr>
        </tfoot>
    </table>

• script部分

<script>

        //获取元素
        var ckAll = document.getElementById('ckAll');
        var cks = document.getElementsByName('ck');
        var trs = document.getElementsByClassName('inline');
        var allCount = document.getElementById('allCount');
        var allPrice = document.getElementById('allPrice');
        var countInput = document.getElementsByClassName('count-input');

        //计算总数
        function sumCount(){
            var sum = 0;
            for(var i=0;i<cks.length;i++){
                if(cks[i].checked == true){
                    var num = Number(countInput[i].value);
                    sum += num;
                }
            }
            allCount.innerHTML = sum;
        }

        //计算总价
        function sumPrice(){
            var sum = 0;
            for(var i=0;i<cks.length;i++){
                if(cks[i].checked == true){
                    var p = Number(trs[i].children[4].innerHTML);
                    sum += p;
                }
            }
            allPrice.innerHTML = sum.toFixed(2);
        }
        
        //计算每一行的总价
        function inlinePrice(){
            for(var i=0;i<trs.length;i++){
                //获取每一行单价
                var price = Number(trs[i].children[2].innerHTML);
                //获取数量
                var num = Number(trs[i].children[3].children[1].value);
                //小计
                trs[i].children[4].innerHTML = (price * num).toFixed(2);

            }
        }

        //数量增加
        function addCount(e){
            // 获取input标签里的value值,数量
            var num =parseInt(e.previousElementSibling.value) ;
            //数量加1
            e.previousElementSibling.value = num+1;
            inlinePrice();
            sumPrice();
            sumCount();
        }

        //数量递减
        function reduceCount(e){
            var num = parseInt(e.nextElementSibling.value);
            if(num <= 0){
                alert("不能再减了");
                return;
            }

            e.nextElementSibling.value = num-1;
            inlinePrice();
            sumPrice();
            sumCount();
        }
       
        //全选和反选
        function checkAll(){
            for(var i=0;i<cks.length;i++){
                cks[i].checked = ckAll.checked;
            }
            sumPrice();
            sumCount();
        }

        //复选框的交互
        function check(){
            // 判断四个小的复选框有没有没被选中的,如果有一个,就把ckAllde的checked 变为false
            for(var i=0;i<cks.length;i++){
                if(cks[i].checked == false){
                    ckAll.checked = false;
                    sumPrice();
                    sumCount();
                    // 有一个小复选框为false,就不需要对其他复选框进行判断了,直接中止函数下面的执行语句
                    return;
                }
            }
            //循环结束后,如果小复选框checked的值都为true,ckAll的checked的值就为true
            ckAll.checked = true;
            sumPrice();
            sumCount();
        }

        //单行删除
        function del(e){
            e.parentElement.parentElement.remove();
            sumPrice();
            sumCount();
        }

    </script>