帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 进阶版(购物车)
进阶版(购物车)
浏览:762次
-
评论:2次
-
发布时间:2020-09-06
Html
Css
Js
序号
商品名称
数量
单价
小计
操作
1
烧煎饼
-
0
+
单价:
2
小计:
0
操作:
2
水煮鱼
-
0
+
单价:
15
小计:
0
操作:
商品一共
0
件,共计花费
0
元
序号
商品名称
单价
操作
1
炒饼
单价:
9
操作:
2
孜然炒肉
单价:
22
操作:
* { margin:0; padding:0; margin:0 auto; } table { width:50%; position:relative; margin:50px auto; border:1px solid black; border-collapse:collapse; } th { background-color:yellow; } tr { text-align:center; height:40px; margin:0 auto; } button { width:19px; height:19px; }
class Cart { getGoodsnum() { let OGoodsnum = document.getElementsByClassName("goods-num"); let goodstotalnum = 0; for (let i = 0; i < OGoodsnum.length; i++) { goodstotalnum += Number(OGoodsnum[i].innerHTML); } let oGoodstotalnum = document.querySelector("#goods-total-num"); oGoodstotalnum.innerHTML = goodstotalnum; } getGoodsPrice() { let Ogoodssingleprice = document.getElementsByClassName("goods-single-price"); let goodstotalprice = 0; for (var i = 0; i < Ogoodssingleprice.length; i++) { goodstotalprice += Number(Ogoodssingleprice[i].innerHTML); } let Ogoodstotalprice = document.querySelector("#goods-total-price"); Ogoodstotalprice.innerHTML = goodstotalprice; } getGoodsSinglePrice(num, price) { return num * price; } Goodadd(btn) { let goodsnum = btn.previousElementSibling; goodsnum.innerHTML = Number(goodsnum.innerHTML) + 1; let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild; let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild; let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice.innerHTML); goodssingleprice.innerHTML = Ogoodssinglepc; this.getGoodsnum(); this.getGoodsPrice(); } Goodmin(btn) { let goodsnum = btn.nextElementSibling; if (goodsnum.innerHTML > 0) { goodsnum.innerHTML = Number(goodsnum.innerHTML) - 1; let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML; let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild; let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice); goodssingleprice.innerHTML = Ogoodssinglepc; this.getGoodsnum(); this.getGoodsPrice(); } } select(btn) { let otr = btn.parentNode.parentNode; otr.remove(); this.getGoodsnum(); this.getGoodsPrice(); } xuhao(btn) { let oXu = document.getElementsByClassName("xu"); for (let i = 0; i < oXu.length; i++) { oXu[i].innerHTML = i + 1; } } eventbind() { let obtns = document.querySelectorAll("button"); let that = this; for (let i = 0; i < obtns.length; i++) { if (i % 2) { obtns[i].onclick = function() { that.Goodadd(this); } } else { obtns[i].onclick = function() { that.Goodmin(this); } } } let oselbtn = document.querySelectorAll(".sel"); for (let i = 0; i < oselbtn.length; i++) { oselbtn[i].onclick = function() { that.select(this); that.xuhao(this); } } } } var ca = new Cart(); ca.eventbind(); class cartTwo { addmenu() { let oaddbtns = document.querySelectorAll(".addbtn"); let otab1 = document.querySelector("#tab1 tbody"); let oTong = document.getElementsByClassName("tong"); for (let i = 0; i < oaddbtns.length; i++) { oaddbtns[i].onclick = function() { let add = this.parentNode.previousElementSibling.previousElementSibling; let price = this.parentNode.previousElementSibling; let oXu = document.getElementsByClassName("xu"); let flag = false; let e = 0; for (let i = 0; i < oTong.length; i++) { if (add.innerHTML == oTong[i].innerHTML) { flag = true; e = i; } } if (flag == true) { ca.Goodadd(oTong[e].nextElementSibling.lastElementChild); } else { let str = `
${add.innerHTML}
-
1
+
${price.innerHTML}
小计:
${price.firstElementChild.innerHTML}
操作:
`; otab1.innerHTML += str; } ca.xuhao(); ca.eventbind();; } } } } let caa = new cartTwo(); caa.addmenu();
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>进阶版(购物车)-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会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:网页首页购物车(加强版)代码
css下拉菜单
原生js仿手风琴轮播图
讨论这个常用代码(2)
回答他人问题或分享心得会奖励牛币
Lv10 CTO
qq***19
2020年09月30日
购物框架
回复
Lv2 入门
qq***02
2021年01月01日
代码写的很好,值得学习
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
762
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值