js原生實現購物車功能

js原生實現購物車功能

功能實現：1. 用JavaScript實現靜態購物車功能
2. 點擊+號數量增加，點擊-號數量遞減；
3. 實現全選、反選和刪除功能；
4. 求出小計、總數量和總價；

效果圖獻上：

上代碼：
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>

HTML中：

    <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>

js中：

<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>