用js写购物车

CSS

<style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 0;
        }

        body {
            color: #666;
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }

        clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            display: inline-table;
        }

        *html .clearfix {
            height: 1%;
        }

        .clearfix {
            display: block;
        }

        *+html .clearfix {
            min-height: 1%;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        /*素材家园 - www.sucaijiayuan.com*/
        .catbox {
            width: 940px;
            margin: 100px auto;
        }

        .catbox table {
            text-align: center;
            width: 100%;
        }

        .catbox table th,
        .catbox table td {
            border: 1px solid #cadeff;
        }

        .catbox table th {
            background: #e2f2ff;
            border-top: 3px solid #a7cbff;
            height: 30px;
        }

        .catbox table td {
            padding: 10px;
            color: #444;
        }

        .catbox table tbody tr:hover {
            background: RGB(238, 246, 255);
        }

        .checkbox {
            width: 60px;
        }

        .check-all {
            vertical-align: middle;
        }

        .goods {
            width: 300px;
        }

        .goods span {
            width: 180px;
            margin-top: 20px;
            text-align: left;
            float: left;
        }

        .goods img {
            width: 100px;
            height: 80px;
            margin-right: 10px;
            float: left;
        }

        .price {
            width: 130px;
        }

        .count {
            width: 90px;
        }

        .count .add,
        .count input,
        .count .reduce {
            float: left;
            margin-right: -1px;
            position: relative;
            z-index: 0;
        }

        .count .add,
        .count .reduce {
            height: 23px;
            width: 17px;
            border: 1px solid #e5e5e5;
            background: #f0f0f0;
            text-align: center;
            line-height: 23px;
            color: #444;
        }

        .count .add:hover,
        .count .reduce:hover {
            color: #f50;
            z-index: 3;
            border-color: #f60;
            cursor: pointer;
        }

        .count input {
            width: 50px;
            height: 15px;
            line-height: 15px;
            border: 1px solid #aaa;
            color: #343434;
            text-align: center;
            padding: 4px 0;
            background-color: #fff;
            z-index: 2;
        }

        .subtotal {
            width: 150px;
            color: red;
            font-weight: bold;
        }

        .operation span:hover,
        a:hover {
            cursor: pointer;
            color: red;
            text-decoration: underline;
        }

        .foot {
            margin-top: 0px;
            color: #666;
            height: 48px;
            border: 1px solid #c8c8c8;
            border-top: 0;
            background-color: #eaeaea;
            background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
            position: relative;
            z-index: 8;
        }

        .foot div,
        .foot a {
            line-height: 48px;
            height: 48px;
        }

        .foot .select-all {
            width: 80px;
            height: 48px;
            line-height: 48px;
            color: #666;
            text-align: center;
        }

        .foot .delete {
            padding-left: 10px;
        }

        .foot .closing {
            border-left: 1px solid #c8c8c8;
            width: 103px;
            text-align: center;
            color: #666;
            font-weight: bold;
            cursor: pointer;
            background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
        }

        .foot .closing:hover {
            background-image: linear-gradient(RGB(226, 226, 226), RGB(241, 241, 241));
            color: #333;
        }

        .foot .total {
            margin: 0 20px;
            cursor: pointer;
        }

        .foot #priceTotal,
        .foot #selectedTotal {
            color: red;
            font-family: "Microsoft Yahei";
            font-weight: bold;
        }

        .foot .selected {
            cursor: pointer;
        }

        .foot .selected .arrow {
            position: relative;
            top: -3px;
            margin-left: 3px;
        }

        .foot .selected .down {
            position: relative;
            top: 3px;
            display: none;
        }

        .show .selected .down {
            display: inline;
        }

        .show .selected .up {
            display: none;
        }

        .foot .selected:hover .arrow {
            color: red;
        }

        .foot .selected-view {
            width: 938px;
            border: 1px solid #c8c8c8;
            position: absolute;
            height: auto;
            background: #ffffff;
            z-index: 9;
            bottom: 48px;
            left: -1px;
            display: none;
        }

        .show .selected-view {
            display: block;
        }

        .foot .selected-view div {
            height: auto;
        }

        .foot .selected-view .arrow {
            font-size: 16px;
            line-height: 100%;
            color: #c8c8c8;
            position: absolute;
            right: 330px;
            bottom: -9px;
        }

        .foot .selected-view .arrow span {
            color: #ffffff;
            position: absolute;
            left: 0px;
            bottom: 1px;
        }

        #selectedViewList {
            padding: 10px 20px 10px 20px;
        }

        #selectedViewList div {
            /* display: inline-block; */
            position: relative;
            width: 100px;
            height: 80px;
            border: 1px solid #ccc;
            margin: 10px;
            float: left;
        }

        #selectedViewList div img {
            width: 100px;
            height: 80px;
            margin-right: 10px;
            float: left;
        }

        #selectedViewList div span {
            display: none;
            color: #ffffff;
            font-size: 12px;
            position: absolute;
            top: 0px;
            right: 0px;
            width: 60px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            background: #000;
            cursor: pointer;
        }

        #selectedViewList div:hover span {
            display: block;
        }
    </style>

HTML

 <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox">
                        <input class="check-one check" type="checkbox" />
                    </td>
                    <td class="goods">
                        <span>Casio/卡西欧 EX-TR350</span>
                    </td>
                    <td class="price">5999.88</td>
                    <td class="count">
                        <span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation">
                        <span class="delete">删除</span>
                    </td>
                </tr>
                <tr>
                    <td class="checkbox">
                        <input class="check-one check" type="checkbox" />
                    </td>
                    <td class="goods">
                        <span>Canon/佳能 PowerShot SX50 HS</span>
                    </td>
                    <td class="price">3888.50</td>
                    <td class="count">
                        <span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation">
                        <span class="delete">删除</span>
                    </td>
                </tr>
                <tr>
                    <td class="checkbox">
                        <input class="check-one check" type="checkbox" />
                    </td>
                    <td class="goods">
                        <span>Sony/索尼 DSC-WX300</span>
                    </td>
                    <td class="price">1428.50</td>
                    <td class="count">
                        <span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation">
                        <span class="delete">删除</span>
                    </td>
                </tr>
                <tr>
                    <td class="checkbox">
                        <input class="check-one check" type="checkbox" />
                    </td>
                    <td class="goods">
                        <span>Fujifilm/富士 instax mini 25</span>
                    </td>
                    <td class="price">640.60</td>
                    <td class="count">
                        <span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation">
                        <span class="delete">删除</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">
            <a class="fl delete" id="deleteAll">删除</a>
            <div class="fr closing">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件</div>
        </div>
    </div>

JS

<script>
        var oBox = document.querySelector('.catbox');
        var checkOnes = document.querySelectorAll('.check-one');

        oBox.addEventListener('click', function (e) {
            var e = e || event;
            var target = e.target;
            var chAll = document.querySelector('.check-all');

            //全选
            if (target.className === 'check-all check') {
                checkOnes.forEach(function (val, i) {
                    val.checked = target.checked
                })
            }

            //反选
            //如果点击单选
            if (target.className === 'check-one check') {
                //遍历单选的值
                for (var i = 0; i < checkOnes.length; i++) {
                    //如果没有被选中，就直接结束循环
                    // foreach不能提前结束 break只能在for里面使用
                    if (!checkOnes[i].checked) {
                        break
                    }
                }
                chAll.checked = i == checkOnes.length;
            }

            //单删
            if (target.className == 'delete') {
                //移除点击对象的父元素的父元素
                target.parentNode.parentNode.remove();
                checkOnes = document.querySelectorAll('.check-one');
                for (var i = 0; i < checkOnes.length; i++) {
                    if (!checkOnes[i].checked) {
                        break
                    }
                }
                chAll.checked = i == checkOnes.length;
            }
            //批量删除
            // 判断单选是否选中
            if (target.id === 'deleteAll') {
                //遍历函数
                checkOnes.forEach(function (val, i) {
                    // 如果里面有值被选中，则点击删除键全部删除
                    if (val.checked) {
                        val.parentNode.parentNode.remove();
                        checkOnes = document.querySelectorAll('.check-one');
                    }
                })
            }

            //数量+
            if (target.className === 'add') {
                // 上一个元素节点值加一
                target.previousElementSibling.value++;
                // 父亲的下一个元素节点--钱数 = 父亲的下一个元素节点 *  他前一个元素节点的value值  得到的是小计
                target.parentNode.nextElementSibling.innerHTML = target.parentNode.previousElementSibling.innerHTML * target.previousElementSibling.value;
                if (target.previousElementSibling.value > 1) {
                    target.previousElementSibling.previousElementSibling.innerHTML = '-'
                }
            }
            //数量-
            if (target.className === 'reduce') {
                if (target.innerHTML) {
                    target.nextElementSibling.value--;
                    target.parentNode.nextElementSibling.innerHTML = target.parentNode.previousElementSibling.innerHTML * target.nextElementSibling.value;
                    if (target.nextElementSibling.value <= 1) {
                        target.innerHTML = ''
                    }
                }
            }

            total()


        })

        function total() {
            var count = 0;
            var money = 0;
            checkOnes.forEach(function (val, i) {
                if (val.checked) {
                    //乘1字符串转化成数字型
                    count += val.parentNode.parentNode.querySelector('.count-input').value * 1;
                    money += val.parentNode.parentNode.querySelector('.subtotal').innerHTML * 1;
                }
            })
            selectedTotal.innerHTML = count
            priceTotal.innerHTML = money.toFixed(2)
        }
    </script>