帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» JS购物车选择加减结算
JS购物车选择加减结算
浏览:884次
-
评论:0次
-
发布时间:2020-03-08
Html
Css
Js
选择
商品
单价
数量
总价
电视
100元
-
1
+
0元
冰箱
100元
-
1
+
0元
彩电
100元
-
1
+
0元
空调
100元
-
1
+
0元
洗衣机
100元
-
1
+
0元
全选
合计
0样
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
<!doctype html><html><head><meta charset="utf-8"><title>JS购物车选择加减结算-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:js购物车选择商品计算价格,增加减少
购物车案例,增加,减少项目,金额变更。
代码没有写注释,实在对不起。
JS二维数组循环输出
JS数字转化为大写汉字特效
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
884
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值