购物车的实现_购物车的具体实现代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_44978043/article/details/120144998

购物车的实现

案例介绍：用户点击加号与减号可以实现商品小计金额的计算，同时，可以对所有的选项进行选择，将选中的数量与总价输出在对应位置

具体实现步骤

1静态页面

（本案例旨在功能代码的实现，页面不是很美观,敬请谅解）
完整的静态页面代码以及js代码见附录

2.商品添加功能的实现

（1）获取页面中所有的添加按钮

·var more = document.querySelectorAll('.more');

（2）通过循环给添加按钮注册时间，同时为了方便后续操作，给按钮添加自定义属性

for (var i = 0; i < more.length; i++) {
    more[i].index = i;
    more[i].addEventListener('click', function () {       
    });
}

(3)点击对应按钮，获取显示具体数量的标签，通过点击事件，实现对应数量的增加，并将增加后的结果返回给页面

var count = document.querySelectorAll('.count');
for (var i = 0; i < more.length; i++) {
    more[i].index = i;
    more[i].addEventListener('click', function () {
        less[this.index].style.backgroundColor = 'grey';
        var b = parseInt(em[this.index].innerHTML);
        b++;
        em[this.index].innerHTML = b;       
    }); 
}

3.商品减少功能的实现

操作流程和添加类似，注意数量不能为负数，在对应数值为0的时候，禁用按钮

var less = document.querySelectorAll('.less');
for (var i = 0; i < less.length; i++) {
    less[i].index = i;

    less[i].addEventListener('click', function () {
        var h = parseInt(em[this.index].innerHTML);
        if (h == 0) {
            less[this.index].style.backgroundColor = 'red';
        } else {
            var a = parseInt(em[this.index].innerHTML);
            a--;
            if (a == 0) {
                less[this.index].style.backgroundColor = 'red';           
            }
            em[this.index].innerHTML = a;

        }     
    })
}

4.对应商品总价小计

获取数量标签与单价标签内容，将对应内容相乘，并添加到页面上进行显示
获取小计标签

var total = document.querySelectorAll('.total');

代码写在对应点击事件内部

var c = parseInt(price[this.index].innerHTML);
total[this.index].innerHTML = a * c;

5.单选与全选按钮的实现

获取所有复选框，点击对应按钮选中或取消，点击全选复选框，选中所有或者取消所有选中的复选框
获取所有input标签

var ischecked = document.querySelectorAll('.checked');
var checkedAll = document.querySelector('.checkedAll');

给对应复选框添加点击事件，实现全选与取消

checkedAll.onclick = function () {
    for (var i = 0; i < ischecked.length; i++) {
        ischecked[i].checked = checkedAll.checked;
    }
})

6.商品总数的实现

点击全选按钮，将所有已经选中的标签中的数量求和，再次点击取消选择，清零选中数量
1.全部商品的选择与取消显示数量

checkedAll.onclick = function () {
    checkedNumber.innerHTML = 0;
    totalprice.innerHTML = 0;
    for (var i = 0; i < ischecked.length; i++) {
        ischecked[i].checked = checkedAll.checked;
    }
    for (var i = 0; i < em.length; i++) {
        if (checkedAll.checked) {
                checkedNumber.innerHTML = parseInt(checkedNumber.innerHTML) + parseInt(em[i].innerHTML);
            }
        } else {
            checkedNumber.innerHTML = 0;
        }
    }
}

2.在进行全选时候，需要判断选中的复选框是否已经选中，将已经选中的按钮，进行剔除，避免总数的重复添加

 if (checkedAll.checked) {
            if (ischecked[i].checked) {
                checkedNumber.innerHTML = parseInt(checkedNumber.innerHTML) + parseInt(em[i].innerHTML);
              
            }
        } else {
            checkedNumber.innerHTML = 0;
        }

    }

3.单选按钮点击时，总数发生对应变化
判断是选中还是取消，如果是选中，将对应数量添加到总数中，如果是取消，将对应数量从总数中减去

for (var i = 0; i < ischecked.length; i++) {
    ischecked[i].index = i;
    ischecked[i].onclick = function () {
        if (this.checked) {
            checkedNumber.innerText = parseInt(checkedNumber.innerText) + parseInt(em[this.index].innerText);
            totalprice.innerHTML = parseInt(totalprice.innerHTML) +parseInt(total[this.index].innerHTML);
        } else {
            checkedNumber.innerText = parseInt(checkedNumber.innerText) - parseInt(em[this.index].innerText);
            totalprice.innerHTML = parseInt(totalprice.innerHTML) -parseInt(total[this.index].innerHTML);
        }
    }
}

4.点击添加或者减少按钮，将对应的数据更新到总数中
同样需要判断该项数据是否被选中，如果没有被选中，则不进行任何操作

if (checkedAll.checked) {
            if (ischecked[this.index].checked) {
                checkedNumber.innerHTML>0?  checkedNumber.innerHTML = parseInt(checkedNumber.innerHTML) - 1:parseInt(checkedNumber.innerHTML);
            }
        }else {
            if (ischecked[this.index].checked) {
                checkedNumber.innerHTML>0?  checkedNumber.innerHTML = parseInt(checkedNumber.innerHTML) - 1:parseInt(checkedNumber.innerHTML);
                totalprice.innerHTML>0?  totalprice.innerHTML = parseInt(totalprice.innerHTML) -parseInt(price[this.index].innerHTML):totalprice.innerHTML = parseInt(totalprice.innerHTML);
            }
        }

7.商品总价的实现

商品总价的实现和商品数量操作类似，对应代码见附录
致此，购物车案例的功能基本实现，主要体现的是自定义属性在操作元素属性时的作用，以及对函数与循环的了解

8.扩展

当所有的复选框被选中时候，全选框也为选中状态，当所有的复选框没有被选中，全选框为未选中状态
声明一个整数0，当有复选框被选中时，该整数自加1，当有复选框被取消时，该整数自减1，同时当全选框被点击时，直接让该整数为所有复选框的个数，即获取的复选框的长度，取消选中时，将整数赋值为0

附录（完整代码，如有不懂或者疑问请在评论区留言，后续会对代码进行完善）

js代码

var less = document.querySelectorAll('.less');
var more = document.querySelectorAll('.more');
var total = document.querySelectorAll('.total');
var count = document.querySelectorAll('.count');
var price = document.querySelectorAll('.price');
var em = document.querySelectorAll('em')
var ischecked = document.querySelectorAll('.checked');
var checkedAll = document.querySelector('.checkedAll');
var checkedNumber = document.querySelector('.checkedNumber');
var totalprice = document.querySelector('.totalprice');
var checkedbox = 0;
checkedAll.onclick = function () {
    checkedNumber.innerHTML = 0;
    totalprice.innerHTML = 0;
    for (var i = 0; i < ischecked.length; i++) {
        ischecked[i].checked = checkedAll.checked;
    }
    for (var i = 0; i < em.length; i++) {
        if (checkedAll.checked) {
            checkedbox = 5;
            if (ischecked[i].checked) {
                checkedNumber.innerHTML = parseInt(checkedNumber.innerHTML) + parseInt(em[i].innerHTML);
                totalprice.innerHTML = parseInt(totalprice.innerHTML) +parseInt(total[i].innerHTML);
            }
        } else {
            checkedbox = 0;
            checkedNumber.innerHTML = 0;
            totalprice.innerHTML = 0;
        }

    }
}

for (var i = 0; i < ischecked.length; i++) {
    ischecked[i].index = i;

    ischecked[i].onclick = function () {
        
        if (this.checked) {
            checkedNumber.innerText = parseInt(checkedNumber.innerText) + parseInt(em[this.index].innerText);
            totalprice.innerHTML = parseInt(totalprice.innerHTML) +parseInt(total[this.index].innerHTML);
            checkedbox += 1;      
            
            if(checkedbox == 5) {

                checkedAll.checked = true;
            }  
        } else {
            checkedNumber.innerText = parseInt(checkedNumber.innerText) - parseInt(em[this.index].innerText);
            totalprice.innerHTML = parseInt(totalprice.innerHTML) -parseInt(total[this.index].innerHTML);
            checkedbox -= 1; 
            
            if(checkedbox == 0) {

                checkedAll.checked = false;
            }  
        }
    }
}


for (var i = 0; i < less.length; i++) {

    if (parseInt(em[i].innerHTML) == 0) {
        less[i].style.backgroundColor = 'red';
    }
}
for (var i = 0; i < less.length; i++) {
    less[i].index = i;

    less[i].addEventListener('click', function () {
        var h = parseInt(em[this.index].innerHTML);
        if (h == 0) {
            less[this.index].style.backgroundColor = 'red';
        } else {
            var a = parseInt(em[this.index].innerHTML);
            a--;
            if (a == 0) {
                less[this.index].style.backgroundColor = 'red';
               
            }
            em[this.index].innerHTML = a;

            var c = parseInt(price[this.index].innerHTML);
            total[this.index].innerHTML = a * c;
        }
        if (checkedAll.checked) {
            if (ischecked[this.index].checked) {
                checkedNumber.innerHTML>0?  checkedNumber.innerHTML = parseInt(checkedNumber.innerHTML) - 1:parseInt(checkedNumber.innerHTML);
                totalprice.innerHTML>0?  totalprice.innerHTML = parseInt(totalprice.innerHTML) -parseInt(price[this.index].innerHTML):totalprice.innerHTML = parseInt(totalprice.innerHTML);
            }
        }else {
            if (ischecked[this.index].checked) {
                checkedNumber.innerHTML>0?  checkedNumber.innerHTML = parseInt(checkedNumber.innerHTML) - 1:parseInt(checkedNumber.innerHTML);
                totalprice.innerHTML>0?  totalprice.innerHTML = parseInt(totalprice.innerHTML) -parseInt(price[this.index].innerHTML):totalprice.innerHTML = parseInt(totalprice.innerHTML);
            }
        }
        
    })
}
for (var i = 0; i < more.length; i++) {

    more[i].index = i;
    more[i].addEventListener('click', function () {
        less[this.index].style.backgroundColor = 'grey';
        var b = parseInt(em[this.index].innerHTML);
        b++;
        em[this.index].innerHTML = b;
        var d = parseInt(price[this.index].innerHTML);
        total[this.index].innerHTML = b * d;
        if (checkedAll.checked) {
            if (ischecked[this.index].checked) {
                checkedNumber.innerHTML = parseInt(checkedNumber.innerHTML) + 1;
                totalprice.innerHTML = parseInt(totalprice.innerHTML) +parseInt(price[this.index].innerHTML);
            }
        }else {
            if (ischecked[this.index].checked) {
                checkedNumber.innerHTML = parseInt(checkedNumber.innerHTML) + 1;
                totalprice.innerHTML = parseInt(totalprice.innerHTML) +parseInt(price[this.index].innerHTML);
            }
        }
    });
}

html+css代码

 <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 23px;
            list-style: none;
        }

        .box {
            border: 2px solid;
            width: 600px;
            margin: 100px auto;
            padding: 20px 0;

        }

        span,input {
            display: inline-block;
            width: 17%;
            text-align: center;
        }

        i,
        em {
            font-style: normal;
        }
        input {
            margin-top: 6px;  
        }
        p {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: stretch;
        }

        i {
            display: inline-block;
            background: grey;
            width: 25px;
            height: 25px;
            cursor: pointer;
            text-align: center;
            line-height: 25px;
            color: white;

        }

        i:hover {
            background: #ccc;
        }

        li {
            margin: 15px;
        }

        em {
            display: inline-block;
            width: 20px;
            text-align: center;
        }
    </style>
<body>
    <div class="box">
        
        <ul>
            <li>
                <p>
                 <span>选中</span>
                    <span>商品名称</span>
                    <span>购买数量</span>
                    <span>商品单价</span>
                    <span>小计金额</span>
                </p>
            </li>
            <li>
                <p>
                    <input type="checkbox" class="checked">
                    <span class="goodsname">
                        苹果4
                    </span>
                    <span class="count">
                        <i class="less">-</i>
                        <em>0</em>
                        <i class="more">+</i>
                    </span>
                    <span class="price">
                        1368
                    </span>
                    <span class="total">
                        0
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <input type="checkbox" class="checked">
                    <span class="goodsname">
                        苹果5
                    </span>
                    <span class="count">
                        <i class="less">-</i>
                        <em>0</em>
                        <i class="more">+</i>
                    </span>
                    <span class="price">
                        2990
                    </span>
                    <span class="total">
                        0
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <input type="checkbox" class="checked">
                    <span class="goodsname">
                        苹果6
                    </span>
                    <span class="count">
                        <i class="less">-</i>
                        <em>0</em>
                        <i class="more">+</i>
                    </span>
                    <span class="price">
                        3990
                    </span>
                    <span class="total">
                        0
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <input type="checkbox" class="checked">
                    <span class="goodsname">
                        苹果7
                    </span>
                    <span class="count">
                        <i class="less">-</i>
                        <em>0</em>
                        <i class="more">+</i>
                    </span>
                    <span class="price">
                        5666
                    </span>
                    <span class="total">
                        0
                    </span>
                </p>
            </li>
            <li>
                <p>
                        <input type="checkbox" class="checked">
                    <span class="goodsname">
                        苹果8
                    </span>
                    <span class="count">
                        <i class="less">-</i>
                        <em>0</em>
                        <i class="more">+</i>
                    </span>
                    <span class="price">
                        8999
                    </span>
                    <span class="total">
                        0
                    </span>
                </p>
            </li>
            <li>
            
            <p><input type="checkbox" class="checkedAll">
                <span>选中数量</span>
                <span class="checkedNumber"> 0 </span>
                <span>总价</span>
                <span class="totalprice">0</span></p>
            </li>

        </ul>
        <div>

        </div>
    </div>
    <script src="./homework.js"></script>
</body>