JavaScript实现购物车结算功能的代码怎么写

这篇文章主要介绍了JavaScript实现购物车结算功能的代码怎么写的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript实现购物车结算功能的代码怎么写文章都会有所收获，下面我们一起来看看吧。

JavaScript实现购物车结算的方法：1、在页面加载后执行function；2、获取元素；3、设置加减按钮；4、另存下标；5、设置加减号的点击事件；6、创建复选框的状态改变事件。

本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

JavaScript怎么实现购物车结算？

HTML代码：

    
        
                        -            
                0件            
            +            
                10元            
            
                小计:                            
        
        
                        -            
                0件            
            +            
                20元            
            
                小计:                            
        
        
                        -            
                0件            
            +            
                30元            
            
                小计:                            
        
        
                        -            
                0件            
            +            
                40元            
            
                小计:                            
        
        
                        -            
                0件            
            +            
                50元            
            
                小计:                            
        
    
    
        全选        
            商品总计:            0        
        
            商品总价:            0        
    
CSS代码：html,body,ul,p {margin:0;padding:0;}ul,li {list-style:none;}ul {width:450px;}li {display:flex;justify-content:space-around;}.sum {width:450px;display:flex;justify-content:space-around;}#container {width:450px;margin:100px auto;}

JS代码：

// 1.页面加载后执行_window.onload = function() {    // 2.获取元素    var liCheck = document.getElementsByName("liCheck"); //li里面的复选框    var decrease = document.getElementsByClassName("decrease"); //减号    var piece = document.getElementsByClassName("piece"); //件数    var increase = document.getElementsByClassName("increase"); //加号    var price = document.getElementsByClassName("price"); //单价    var smallPrice = document.getElementsByClassName("smallPrice"); //小计    var checkAll = document.getElementById("checkAll"); //全选复选框    var totalCount = document.getElementById("totalCount"); //总计    var totalPrice = document.getElementById("totalPrice"); //总价    // 3.加减按钮    for (var i = 0; i < decrease.length; i++) {        // 4.另存下标        decrease[i].index = i;        increase[i].index = i;        liCheck[i].index = i;        // 5.减号的点击事件        decrease[i].onclick = function() {            // 5-1.判断件数是否大于0            if (piece[this.index][xss_clean] <= 1) {                this.disabled = true; //当件数小于等于0时, 将减号按钮禁用            }            // 5-1-1.当前件数-1            piece[this.index][xss_clean]--;            // 5-1-2.计算小计            smallPrice[this.index].value = Number(smallPrice[this.index].value) - Number(price[this.index][xss_clean]);            // 6-4.如果当前条目是被选中状态, 则需要将该商品计入总计和总价            if (liCheck[this.index].checked) { //选中                totalCount[xss_clean]--;                totalPrice[xss_clean] = Number(totalPrice[xss_clean]) - Number(price[this.index][xss_clean]);            }        }        // 6.加号的点击事件        increase[i].onclick = function() {            // 6-1.将对应的减号解禁            decrease[this.index].disabled = false;            // 6-2.当前件数+1            piece[this.index][xss_clean]++;            // 6-3.计算小计            smallPrice[this.index].value = Number(smallPrice[this.index].value) + Number(price[this.index][xss_clean]);            // 6-4.如果当前条目是被选中状态, 则需要将该商品计入总计和总价            if (liCheck[this.index].checked) { //选中                totalCount[xss_clean]++;                totalPrice[xss_clean] = Number(totalPrice[xss_clean]) + Number(price[this.index][xss_clean]);            }        }        // 7.复选框的状态改变事件        var count = 0; //存储选中个数        liCheck[i].onchange = function() {            // 7-1.判断是否选中            if (this.checked) { //选中状态                count++;                totalCount[xss_clean] = Number(totalCount[xss_clean]) + Number(piece[this.index][xss_clean]); //总计加当前件数                totalPrice[xss_clean] = Number(totalPrice[xss_clean]) + Number(smallPrice[this.index].value); //总计加当前件数                // 7-1-1. 判断选中个数是否与复选框个数一致            } else { //取消选中状态                count--;                totalCount[xss_clean] = Number(totalCount[xss_clean]) - Number(piece[this.index][xss_clean]); //总计加当前件数                totalPrice[xss_clean] = Number(totalPrice[xss_clean]) - Number(smallPrice[this.index].value); //总计加当前件数            }            count == liCheck.length ? checkAll.checked = true : checkAll.checked = false;        }    }    // 8.全选复选框    checkAll.onchange = function() {        totalCount[xss_clean] = 0; //总计置为0        totalPrice[xss_clean] = 0; //总价置为0        for (var j = 0; j < liCheck.length; j++) {            // 8-1. 将li里面的复选框与全选状态保持一致            liCheck[j].checked = this.checked;            // 8-2. 判断是否全选            if (this.checked) {                count = liCheck.length;                totalCount[xss_clean] = Number(totalCount[xss_clean]) + Number(piece[j][xss_clean]);                totalPrice[xss_clean] = Number(totalPrice[xss_clean]) + Number(smallPrice[j].value);            } else {                count = 0;            }        }    }}

关于"JavaScript实现购物车结算功能的代码怎么写"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"JavaScript实现购物车结算功能的代码怎么写"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。