js购物车选择加减结算

Html

Css

商品	单价	数量	总价
电视	100元	1	0元
冰箱	100元	1	0元
彩电	100元	1	0元
空调	100元	1	0元
洗衣机	100元	1	0元

* {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	text-align:center;
	margin:20px auto;
}
td {
	border:1px solid black;
	width:100px;
	height:35px;
}
button {
	width:16px;
	height:16px;
	text-align:top;
}

var btnjian = document.getElementsByClassName('jian');
var btnjia = document.getElementsByClassName('jia');
var spn = document.getElementsByTagName('span');
var zongjia = document.getElementsByClassName('zongjia');
var danjia = document.getElementsByClassName('danjia');
var ipt = document.getElementsByTagName('input');
var heji = document.getElementById('heji');
var yangshu = document.getElementById('yangshu');

for (var i = 0; i < btnjia.length; i++) {
    btnjia[i].index = i;
    btnjia[i].onclick = function() {
        spn[this.index].innerHTML = parseInt(spn[this.index].innerHTML) + 1;
        zongjia[this.index].innerHTML = spn[this.index].innerHTML * parseInt(danjia[this.index].innerHTML) + '元';
        if (spn[this.index].innerHTML != 0) {
            btnjian[this.index].disabled = false;
        }
        var shujiji = 0;
        var zongjiajia = 0;
        for (var i = 0; i < ipt.length - 1; i++) {
            if (ipt[i].checked) {
                shujiji = parseInt(spn[i].innerHTML) + parseInt(shujiji);
                zongjiajia = spn[i].innerHTML * parseInt(danjia[i].innerHTML) + zongjiajia;
            }
        }
        yangshu.innerHTML = shujiji + '样';
        heji.innerHTML = zongjiajia + '元';

}
}

for (var i = 0; i < btnjia.length; i++) {
    btnjian[i].index = i;
    btnjian[i].onclick = function() {
        spn[this.index].innerHTML = parseInt(spn[this.index].innerHTML) - 1;
        zongjia[this.index].innerHTML = spn[this.index].innerHTML * parseInt(danjia[this.index].innerHTML) + '元';
        if (spn[this.index].innerHTML == 0) {
            this.disabled = true;
        }
        var shujiji = 0;
        var zongjiajia = 0;
        for (var i = 0; i < ipt.length - 1; i++) {
            if (ipt[i].checked) {
                shujiji = parseInt(shujiji) + parseInt(spn[i].innerHTML);
                zongjiajia = zongjiajia + spn[i].innerHTML * parseInt(danjia[i].innerHTML);
            }
        }
        yangshu.innerHTML = shujiji + '样';
        heji.innerHTML = zongjiajia + '元';
    }
}
for (var j = 0; j < ipt.length - 1; j++) {
    ipt[j].index = j;
    ipt[j].onclick = function() {
        zongjia[this.index].innerHTML = spn[this.index].innerHTML * parseInt(danjia[this.index].innerHTML) + '元';
        var zongjiji = 0;
        var shuliangliang = 0;
        for (var i = 0; i < ipt.length - 1; i++) {
            if (ipt[i].checked) {
                zongjiji = parseInt(zongjia[i].innerHTML) + zongjiji;
                shuliangliang = parseInt(spn[i].innerHTML) + shuliangliang;
            }
        }
        heji.innerHTML = zongjiji + '元';
        yangshu.innerHTML = shuliangliang + '样';
        var flag = true;
        for (z = 0; z < ipt.length - 1; z++) {
            if (!ipt[z].checked) {
                flag = false;
                break
            }
        }
        ipt[ipt.length - 1].checked = flag;
    }
}

ipt[ipt.length - 1].onclick = function() {
    for (var i = 0; i < ipt.length - 1; i++) {
        ipt[i].checked = ipt[ipt.length - 1].checked;
    }
    if (ipt[ipt.length - 1].checked) {
        var hejiji = 0;
        yangshu.innerHTML = Number(spn[0].innerHTML) + Number(spn[1].innerHTML) + Number(spn[2].innerHTML) + Number(spn[3].innerHTML) + Number(spn[4].innerHTML) + '样';
        for (var p = 0; p < spn.length; p++) {
            hejiji = parseInt(spn[p].innerHTML) * parseInt(danjia[p].innerHTML) + hejiji;
        }
        heji.innerHTML = hejiji + '元';
        for (var z = 0; z < zongjia.length; z++) {
            zongjia[z].innerHTML = spn[z].innerHTML * parseInt(danjia[z].innerHTML) + '元';
        }
    } else {
        for (var z = 0; z < zongjia.length; z++) {
            zongjia[z].innerHTML = spn[z].innerHTML * parseInt(danjia[z].innerHTML) + '元';
        }
        yangshu.innerHTML = 0 + '样';
        heji.innerHTML = 0 + '元';
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js购物车选择加减结算



代码描述：js购物车选择商品计算价格，增加减少

更新时间：2020-03-04 00:11:25
购物车案例，增加，减少项目，金额变更。
代码没有写注释，实在对不起。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

aiqiyun

相关代码

js购物车选择加减结算

最新