- 浏览: 50612 次
- 性别:
- 来自: 广州
文章分类
最新评论
跟商城有关系的网站,难免会有购物车的结账界面。
我用javascript实现了增加数量/减少数量,实时计算总金额,删除该商品,选中商品/反选商品/全选/全反选...的操作。
欢迎指点!~
效果如图:(图片有点大,可以到这里看 http://hiuman.iteye.com/picture/136625)
用到的素材:加号 减号 商品图 删除图标 选中的图标和没选中的图标
代码:
我用javascript实现了增加数量/减少数量,实时计算总金额,删除该商品,选中商品/反选商品/全选/全反选...的操作。
欢迎指点!~
效果如图:(图片有点大,可以到这里看 http://hiuman.iteye.com/picture/136625)
用到的素材:加号 减号 商品图 删除图标 选中的图标和没选中的图标
代码:
<body onselectstart="return false;" style="-moz-user-select:none;"> <table> <thead> <tr> <th><input type="checkbox"></th> <th>商品信息</th> <th>数量</th> <th>单价<span>(元)</span></th> <th>金额<span>(元)</span></th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td> <img src="./cart/good.png"> <p>小呀小苹果(一)</p> </td> <td><span class="add"></span><span class="num">3</span><span class="dec"></span></td> <td class="per">¥<span>1900</span></td> <td class="money">¥<span>3800</span></td> <td><a class="del"></a></td> </tr> <tr> <td><input type="checkbox"></td> <td> <img src="./cart/good.png"> <p>小呀小苹果(二)</p> </td> <td><span class="add"></span><span class="num">3</span><span class="dec"></span></td> <td class="per">¥<span>1900</span></td> <td class="money">¥<span>3800</span></td> <td><a class="del"></a></td> </tr> <tr> <td><input type="checkbox"></td> <td> <img src="./cart/good.png"> <p>小呀小苹果(三)</p> </td> <td><span class="add"></span><span class="num">3</span><span class="dec"></span></td> <td class="per">¥<span>1900</span></td> <td class="money">¥<span>3800</span></td> <td><a class="del"></a></td> </tr> </tbody> <tfoot> <tr> <td></td> <td>已选:<span class="choosen">0</span>件 共<span class="total">0</span>元</td> <td></td> <td></td> <td></td> <td><button class="sure">结账</button></td> </tr> </tfoot> </table> </body>
*{ margin: 0;padding: 0;list-style: none;font-size: 16px;font-family: 'arial';font-weight: normal; } table{ width: 1020px;margin: 0 auto;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;text-align: center; } table tr{ height: 100px;line-height: 100px; } thead{ background: black;color: white; } thead tr,tfoot tr{ height: 40px;line-height: 40px; } table img{ float: left;width: 65px;height: 65px;margin-top: 18px; } table input[type="checkbox"]{ width: 32px;height: 32px;-webkit-appearance: none;background: url(./cart/checkbox.png) no-repeat center center;vertical-align:middle } tbody td:nth-child(1){ width: 7%; } tbody td:nth-child(2){ width: 35%; } tbody td:nth-child(3){ width: 13%; } tbody td:nth-child(4){ width: 15%; } tbody td:nth-child(5){ width: 15%; } tbody td:nth-child(6){ width: 15%; } tbody tr{ border-bottom: 1px solid black; } table .add,table .dec,table .del{ display: inline-block;width: 14px;height: 21px;cursor: pointer; } table .add{ background: url(./cart/add.png) no-repeat center center; } table .dec{ background: url(./cart/dec.png) no-repeat center center; } table .num{ display: inline-block;width: 57px;margin: 0 18px;height: 39px;line-height: 39px;border: 1px solid #b0b0b0;background: #d4d4d4; } table .del{ width: 18px;background: url(./cart/del.png) no-repeat; } table .money,table .total{ color: red; } table .choosen{ color: #3083ff; } table .sure{ width: 100%;height: 100%;background: #3083ff;color: #fff;border: none;cursor: pointer; } input[type='checkbox']:checked{ background: url(./cart/check.png) no-repeat center center; }
window.onload = function(){ // 按顺序为:list个数 加 数量 减 删 选择框 金额 单价 选中的个数 // list个数 不包括thead var oListNumber = document.getElementsByClassName('add').length; var oAdds = document.getElementsByClassName('add'); var oNums = document.getElementsByClassName('num'); var oDecs = document.getElementsByClassName('dec'); var oDels = document.getElementsByClassName('del'); var oInputs = document.getElementsByTagName('input'); var oMoneys = document.getElementsByClassName('money'); var oPers = document.getElementsByClassName('per'); var oAllChecked = false; //全选 var othercheckbox =0; //除了全选以外的其他checkbox changeMoney(); // checkbox点击事件 for(var i =0;i<oInputs.length;i++){ (function(i){ oInputs[i].onclick = function(){ // 判断除了全选以外的checkbox if(i!=0){ if(oInputs[i].checked ==true){ othercheckbox++ }else{ othercheckbox-- } } // 判断是否全选 if(othercheckbox == oListNumber){ oInputs[0].checked = true; }else{ oInputs[0].checked = false; } // 判断是否选择了全选checkbox if(i==0){ oAllChecked = !oAllChecked; for(var j=0;j<oInputs.length;j++){ oInputs[j].checked=oAllChecked; } if(oAllChecked){ othercheckbox = oListNumber }else{ othercheckbox = 0; } } changeTotal() } })(i) } // add事件 for(var i =0;i<oAdds.length;i++){ (function(i){ oAdds[i].onclick = function(){ oNums[i].innerText = parseInt(oNums[i].innerText) +1; changeMoney() changeTotal() } })(i) } // dec事件 for(var i =0;i<oDecs.length;i++){ (function(i){ oDecs[i].onclick = function(){ if(oNums[i].innerText != '0'){ oNums[i].innerText = parseInt(oNums[i].innerText) -1; } changeMoney() changeTotal() } })(i) } // add事件和dec事件伴随的金额改变事件 function changeMoney(){ var oPerSpan =[]; //单价 var oMoneySpan=[]; //金额 for(var i=0;i<oListNumber;i++){ oPerSpan[i] = oPers[i].getElementsByTagName('span')[0].innerText; oMoneySpan[i] = oMoneys[i].getElementsByTagName('span')[0]; oMoneySpan[i].innerText = (parseInt(oNums[i].innerText)*parseInt(oPerSpan[i])) } } // del事件 for(var i =0;i<oDels.length;i++){ (function(i){ oDels[i].onclick = function(){ var thisdom = oDels[i].parentNode.parentNode; var tbody = thisdom.parentNode; tbody.removeChild(thisdom) changeTotal() } })(i) } // 总数量 总金额 function changeTotal(){ var oChoosen = document.getElementsByClassName('choosen')[0]; var oTotal = document.getElementsByClassName('total')[0]; var sumNUM = 0 var sumTOTAL =0 for(var i=1;i<oInputs.length;i++){ if(oInputs[i].checked){ sumNUM = parseInt(oNums[i-1].innerText) + parseInt(sumNUM); sumTOTAL = parseInt(oMoneys[i-1].getElementsByTagName('span')[0].innerText) +parseInt(sumTOTAL) } } oChoosen.innerText = sumNUM; oTotal.innerText = sumTOTAL; } }
发表评论
-
菜单栏和内容
2017-03-10 09:35 471常见的菜单栏+内容界面。欢迎指点。 效果图: 可以戳这里 ... -
得到两数相除的百分数
2016-12-20 15:42 727原理: Math.ceil() //向上取整 Mat ... -
可拖动的轮播图
2016-11-07 14:55 1584(涉及到swiper.min.js,swiper.min.cs ... -
比较全的屏幕信息
2016-11-07 14:13 385比较全的屏幕信息。 function getInfo ... -
选项卡
2016-11-07 13:47 619欢迎指点! 效果图: 有两种办法实现: 原理一:多个ht ... -
javascript写的轮播图
2016-11-07 12:15 465欢迎指点! 先放上效果图: 鼠标移入界面后: 图片有 ... -
原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass
2016-10-13 17:56 1064介绍: 1、hasClass:判断DOM元素是否存在类。 2 ... -
阻止事件冒泡
2016-09-18 15:55 457JavaScript停止冒泡和阻止浏览器默认行为 事件兼容 ... -
实时监听输入框值变化
2016-09-13 10:35 3010(1)使用 jQuery 的话,同时绑定 oninput 和 ... -
js/jQuery实现类似百度搜索功能
2016-09-12 17:00 1111html代码: <!DOCTYPE html> ... -
左侧菜单栏右侧内容(改进,有js效果)
2016-09-09 10:25 4445(如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章 ... -
js生成一周内的日期+周几
2016-09-08 10:41 1278(如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果 ... -
定义类或对象
2016-09-07 15:17 410学习总结: 工厂方式 ...
相关推荐
实现效果: ... javascript实现购物车效果,通过原生js代码实现购物车效果,一般电商网站或者商城网站会使用到购物车的效果,点击加减,总价随之变化,选中商品,点击删除,可以删除选中的商品!
HTML简单的实现购物车
Vscode编译软件 + 使用Vue实现 购物车页面 使用步骤: 1、下载资源,使用vscode打开 2、在终端里安装所有包 npm i 3、运行项目 npm run serve 4、访问 http://localhost:8080/
资源包含购物车的实现代码、购物车功能介绍、JS部分的详细讲解、视频演示和讲解。 购物车功能介绍:打开购物车的首页有雪花满屏飘落的动态背景和音乐,出现移动文字“欢迎进入购物车”等...购物车页面返回未选择状态。
2.用户可以查看购物车的内容,在用户查看购物车时,以你认为合适的方式或在页面合适位置,提示用户购买商品信息,如:商品名、价格、总价。 6.已登录用户可以将商品放入购物车,未登录用户只能打开主页浏览器商品;
用javascript实现的页面购物车
简单购物车程序实现 ...查看购物车页面 每个产品包括:产品编号、产品名称、产品描述、产品价格 所有的产品数据,不是来自数据库,而是用集合存储的固定数据。也就是说,我们操作的购物车产品,是从集合中进行获取的
HTML5新手小案例,实现简单的购物车功能,新手代码,老鸟请跳过,简单易懂,没有过多的复杂的CSS,HTML5新手请笑纳。
我们有很多种方法实现将商品添加到购物车,通常的做法是点击“添加到购物车”按钮,会跳转到购物车,在购物车里可以点击“结算”按钮进行结算。而今天我给大家介绍一个更友好的解决方案。 查看演示 下载源码 默认...
本项目基于blibli上的[JavaScript实用案例 js实现购物车功能](https://www.bilibili.com/video/BV1jJ411q7NB/?vd_source=82aacf68766305e449b09379dcddb8bf)的前端页面框架完成,并且对html页面进行简单修改,使用js...
基本功能: 网站显示商品分类和商品信息,提供搜索商品、浏览商品...网页的模块主要由主页、栏目页、商品详情页、轮播页、个人信息登录页面、秒杀页、购物车、注册和登录、咨询跳转到微信和QQ页、流动广告、弹窗广告等
本项目仅仅演示如何用javascript+cookie实现购物车功能,而且是AJAX哦,无刷新效果。真正项目中,需要继续完善,比如用户输入的商品数量是否为数字,是否大于0。用户如何修改商品数量?等等。关于购物车,我的想法是...
无标题文档 .inputs{ width:50px; text-align: center; } 你已购买的商品:女士衣服 单价:100.00 数量为: 总价为: 100.00 JS: { //找标签 ... let txt = document.getElementB
使用vue实现的移动端购物车页面,包括增加、删除商品,自动计算总价等功能。
一个简单的使用jQuery实现的单页面购物车效果,可以实现添加到购物车,删除,数量和金额的增减,和合计金额的计算 等效果
本项目仅仅演示如何用javascript+cookie实现购物车功能,而且是AJAX哦,无刷新效果。真正项目中,需要继续完善,比如用户输入的商品数量是否为数字,是否大于0。用户如何修改商品数量?等等。关于购物车,我的想法是...
View:根据Model数据渲染页面 Controller:传递数据 Command:操作数据,获取数据 Event:事件总线,注册事件 商品列表: 初始化View层,建立Ajax获取数据,之后由controller触发事件至事件总线,...
-基于 JavaScript 实现微信小程序商城前端,包含商城首页、分类页、产品详情、个人中心、分销、秒杀、购物车、积分、优惠券、订单、余额等全套页面 - 不懂运行,下载完可以私聊问,可远程教学 该资源内项目源码是...
6.3 购物车页面显示: 27 6.4操作订单界面显示 28 7系统的测试 29 7.1系统的测试意义 29 7.2测试目的 30 7.3 测试方法 31 7.4 系统功能测试用例 31 7.5 总结 32 8 总结 33 致谢 34 参考文献 35 毕业设计(论文)知识...