js代码实现购物车功能

@购物车


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>body,p,ol,ul,li,h1,h2,h3,h4,h5,h6,form,table,td,th,dl,dt,dd,fieldset,legend,input{margin:0;padding:0;}a{text-decoration: none;}body{padding-left: 14px;padding-right:38px;}/*header*/header{position: relative;width: 100%;height: 40px;}header p {font-weight: bold;font-size:21px;margin-bottom: 20PX;text-align: left;  }.priceTite{font-size: 12px;color: #4c4c4c;position: absolute;right: 280px;bottom:0px;}.countTite{font-size: 12px;color: #4c4c4c;position: absolute;right: 30px;bottom:0px;}table{border-collapse: collapse;width: 100%;}tr{border-top: 1px solid #ddd;border-bottom:1px solid #ddd;padding:10px;opacity: .9;}td{padding: 10px;font-size: 12px;}img{width:150px;}.infon{width: 450px;font-size: 12px;line-height: 20px;}.infon .name{font-size: 16px;color:#375d8a;font-weight: bold;}.infon .name span{font-size: 12px;color:#0f171a;font-weight: normal;}.infon .style{color:#8e8d88;}.infon .sendTime{color: #a95d2c;}.price{color:#a11d00;font-weight: bold;width: 200px;font-size:16px;vertical-align: middle;}.btnCount{width: 60px;height: 20px;padding-left:10px;background-color: #eff0f2;border:1px solid gray;border-radius: 2px;}#total{float:right;font-weight: bold;height: 50px;line-height: 50px;}#totalMoneyS{color:#a11d00;}</style></head><body><header> <p class="title">购物车</p><span class="priceTite">价格</span><span class="countTite">数量</span></header><table id="t"><tr><td class="pic"><img src="../img/0.jpg"></td><td class="infon"><p class="name">成果管理（珍藏版）<span>彼得.德鲁克(peter F.Durcker)</span></p><p class="style">平装</p><p class="sendTime">通常需要1-2个月发货</p><p class="sendPrice">此商品享受免费配送</p><p><a class="delete" href="#">删除</a>|<a href="#">移入收藏夹</a></p>   </td><td class="price">￥<span>37.30</span></td><td class="count"><input class="btnCount" type="number" value="1" min="0"></td></tr><tr><td class="pic"><img src="../img/0.jpg"></td><td class="infon"><p class="name">创新与企业家精神（珍藏版）<span>彼得.德鲁克(peter F.Durcker)</span></p><p class="style">平装</p><p class="sendTime" style="color:#366c32;">现在有货</p><p class="sendPrice">此商品享受免费配送</p><p><a class="delete" href="#">删除</a>|<a href="#">移入收藏夹</a></p>   </td><td class="price">￥<span>39.80</span></td><td class="count"><input class="btnCount" type="number" value="1" min="0"></td></tr></table><p id="total">小计（<span id="totalCount">2</span>件商品）<span id="totalMoneyS">￥<span id="totalMoney">77.10</span></span></p></body>
</html>
<script type="text/javascript">// 计算总金额,总数量let btnCount=$(".btnCount");var t=$("#t");function  calTotalMoney(){let totalMoney=0;let totalCount=0;let price=$(".price");for(let i=0;i<btnCount.length;i++){totalMoney += parseInt(btnCount[i].value)*parseFloat(price[i].firstElementChild.innerHTML);totalCount += parseInt(btnCount[i].value);}$("#totalMoney").innerHTML=totalMoney.toFixed(2);$("#totalCount").innerHTML=totalCount;}for(let i=0;i<btnCount.length;i++){btnCount[i].function(){calTotalMoney();}}// 删除商品function deleteGoods(num,node){for(let i=0;i<=t.rows[num].cells.length;i++){t.rows[num].deleteCell(0);}t.rows[num].cells[0].colSpan="4";t.rows[num].cells[0].innerHTML='<a href="#">'+node.parentNode.parentNode.firstElementChild.innerText+"</a>"+"从购物车成功删除。";calTotalMoney();}let deletes=$(".delete");for(let i=0;i<deletes.length;i++){this.index=i;deletes[i].function(){if(confirm("确认要删除吗?")){deleteGoods(i,this);}}}function $(str){if(str.charAt(0)=="#"){return document.getElementById(str.substring(1));}else if(str.charAt(0)=="."){return document.getElementsByClassName(str.substring(1));}else{return document.getElementsByTagName(str);}}</script>

js代码实现购物车功能相关推荐

前端js代码实现截图功能
前端js代码实现截图功能据我所知,屏幕截图大致可以分为两种类型. 一种是真-屏幕截图,也就是我们平常QQ,微信,钉钉等社交工具里面所用到的截图.也就是说它能把我们看到的东西截取下来,所见即所得. 另 ...
js+html实现购物车功能
实现购物车物品删除,数量增加减少,选中,批量删除,结算功能,金额汇总,商品数量汇总,前端代码时借用一个博主小哥的,因为本博主对前端显示界面的美化不擅长,这里为了方便,就引用其他博主小哥的前端界面代码! ...
Vue.js入门实战项目（五）--编写Vue.js代码实现前端功能
前端页面通常由前端开发人员编写好,作为后端开发,只要能定位到自己需要写代码的地方,实现相应的需求即可. 完整项目我已经上传到了码云上,供大家学习参考. vuejsdemo 定位 HTML 1.找到 V ...
Chrome谷歌浏览器最小化和页面遮挡后JS代码不稳定和功能失效的解决思路
1. 前言: 一位客户向我定制了一款网页版区块链游戏自动挂机脚本,主要需求是定时派遣队伍外出打工,定时派回等功能. 脚本我主要用JavaScript代码来实现,用定时器 setInterval().s ...
js代码实现购物车效果
页面分上下两部分,上部分是所有的数据,下部分是购物车.通过在上面选择需要处理的数据添加进到购物车,实现对购物车数据的统一处理. 需要注意的有两点:①购物车数据可删除,且不能重复添加 ②响应时间考虑,购 ...
通过JS代码实现Ping功能
function ping(ip){var img = new Image();var start = new Date().getTime();var flag = false;var isClos ...
百度自动推送html5,百度暂停 JS 代码自动推送功能，代码是否需要删除？
本月上旬末的时候百度站长平台就推送了一则关于:搜索资源平台自动推送暂停使用通知.说到由于升级维护,搜索资源平台链接提交-自动提交-自动推送(JS 代码推送)功能暂时停止使用.并且会在恢复使用时再次通知 ...
如何用php脚本抢东西,如何用JS代码实现网页抢购功能
作为一名程序员,我们会遇到和很多的开发问题,本章内容小编就为大家分享一篇如何用JS实现网页抢购功能,以下我们是通过chrome浏览器的开发者功能,实现如何用JS代码完成抢购功能以及如何通过chrome ...
微信小程序实现购物车功能
在我的GitHub上有校园二手交易微信小程序的源码,这里面包含了购物车的功能,GitHub地址:https://github.com/zhuyuzhu/Secondhand-goods-on-camp ...

js代码实现购物车功能

js代码实现购物车功能相关推荐

最新文章

热门文章

js代码 实现购物车功能

js代码 实现购物车功能相关推荐

最新文章

热门文章

js代码实现购物车功能

js代码实现购物车功能相关推荐