（2020-09-10更新：修复发现的bug，优化代码）

跟商城有关系的网站，难免会有购物车的结账界面。

我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。

欢迎指点！~

图片没有提供，建议自己替换。

效果如图：

用到的素材：加号 减号 商品图 删除图标 选中的图标和没选中的图标 

代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>document</title><style>* {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;}table th:nth-child(1) {width: 72px;}table th:nth-child(2) {width: 357px;}table th:nth-child(3) {width: 133px;}table th:nth-child(4) {width: 153px;}table th:nth-child(5),table th:nth-child(6) {width: 152px;}thead {background: black;color: white;}thead tr,tfoot tr {height: 40px;line-height: 40px;}tbody tr {border-bottom: 1px solid black;}table img {float: left;width: 65px;height: 65px;margin-top: 18px;}table input[type='checkbox'] {width: 32px;height: 32px;-webkit-appearance: none;background-position: center center;background-repeat: no-repeat;background-image: url(./cart/checkbox.png);vertical-align: middle;cursor: pointer;}input[type='checkbox']:checked {background-image: url(./cart/check.png);}table .add,table .dec,table .del {display: inline-block;width: 14px;height: 14px;cursor: pointer;background-size: contain;background-repeat: no-repeat;background-position: center center;}table .add {background-image: url(./cart/add.png);}table .dec {background-image: url(./cart/dec.png);}table .del {background-image: url(./cart/del.png);}table .num {display: inline-block;width: 57px;margin: 0 18px;height: 39px;line-height: 39px;border: 1px solid #b0b0b0;background: #d4d4d4;}table .money,table .total {color: red;}table .choosen {color: #3083ff;}table .sure {width: 100%;height: 100%;background: #3083ff;color: #fff;border: none;cursor: pointer;}</style></head><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>件&nbsp;&nbsp;共<span class="total">0</span>元</td><td></td><td></td><td></td><td><button class="sure">结账</button></td></tr></tfoot></table><script>window.onload = function () {var oListNumber = document.getElementsByClassName('add').lengthvar oAdds = document.getElementsByClassName('add')var oDecs = document.getElementsByClassName('dec')var oDels = document.getElementsByClassName('del')var oInputs = document.getElementsByTagName('input')var oAllChecked = false //全选var othercheckbox = 0 //除了全选以外的其他checkboxchangeMoney()// checkbox点击事件for (var i = 0; i < oInputs.length; i++) {oInputs[i].onclick = function () {// 判断除了全选以外的checkboxif (i != 0) {if (this.checked == true) {othercheckbox++} else {othercheckbox--}}// 判断是否全选if (othercheckbox == oListNumber) {oInputs[0].checked = true} else {oInputs[0].checked = false}// 判断是否选择了全选checkboxif (i == 0) {oAllChecked = !oAllCheckedfor (var j = 0; j < oInputs.length; j++) {oInputs[j].checked = oAllChecked}if (oAllChecked) {othercheckbox = oListNumber} else {othercheckbox = 0}}changeTotal()}}// add事件for (var i = 0; i < oAdds.length; i++) {oAdds[i].onclick = function () {this.nextElementSibling.innerText =parseInt(this.nextElementSibling.innerText) + 1changeMoney()changeTotal()}}// dec事件for (var i = 0; i < oDecs.length; i++) {oDecs[i].onclick = function () {if (this.previousElementSibling.innerText != '0') {this.previousElementSibling.innerText =parseInt(this.previousElementSibling.innerText) - 1}changeMoney()changeTotal()}}// add事件和dec事件伴随的金额改变事件function changeMoney() {var oListNumber = document.getElementsByClassName('add').lengthvar oNums = document.getElementsByClassName('num')var oMoneys = document.getElementsByClassName('money')var oPers = document.getElementsByClassName('per')var oPerSpan = [] //单价var oMoneySpan = [] //金额for (var i = 0; i < oListNumber; i++) {oPerSpan[i] = oPers[i].getElementsByTagName('span')[0].innerTextoMoneySpan[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++) {oDels[i].onclick = function () {var thisdom = this.parentNode.parentNodevar tbody = thisdom.parentNodetbody.removeChild(thisdom)changeTotal()}}// 总数量 总金额function changeTotal() {var oNums = document.getElementsByClassName('num')var oInputs = document.getElementsByTagName('input')var oMoneys = document.getElementsByClassName('money')var oChoosen = document.getElementsByClassName('choosen')[0]var oTotal = document.getElementsByClassName('total')[0]var sumNUM = 0var sumTOTAL = 0for (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 = sumNUMoTotal.innerText = sumTOTAL}}</script></body>
</html>
												


											

javascript 实现购物车页面相关推荐
	

    
								
  1. 为啥我从后台查到的值在页面显示的是undefined_【java笔记】046天，作购物车页面，学习JavaScript...
		
    今天是学习java 的第46天,今天先是完成了购物车页面的简单制作,然后是开始学习JavaScript的知识. html+css 只是可以实现静态的页面无法实现动态的效果 : 购物车页面的制作: 效果 ...
    
		
    2. 
						
  2. [JavaScript实训] -- 制作简易的购物车页面
		
    目录 一.训练要点: 二.题目需求说明: 三.实现思路及关键代码: 四.完整代码实现: 一.训练要点: 1.使用close()方法关闭窗口: 2.使用confirm()方法进行信息确认: 3.使用al ...
    
		
    3. 
						
  3. JavaScript实现购物车加减和价格运算等功能
		
    需求说明: 单击"半闭"按钮时,关闭当前页面购物车页面 单击"移入收藏"弹出收藏提示 单击"删除"弹出确认删除提示 单击"结算&q ...
    
		
    4. 
						
  4. JavaScript 网页购物车项目
		
      今天是JavaScript的一个汇总,最近小编把自己曾经写过的JavaScript 网页购物车项目给整理了一下,大家可以看一下,然后自己也可以写一个网页购物车项目噢,然后我们的JavaScript ...
    
		
    5. 
						
  5. 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
		
    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
    
		
    6. 
						
  6. 电商前台项目（五）：完成加入购物车功能和购物车页面
		
    Vue2项目前台开发:第五章 一.加入购物车 1.路由跳转前先发请求把商品数据给服务器 (1)观察接口文档 (2)写接口 (3)dispatch调用接口传数据 (4)判断服务器是否已经收到商品数据 2 ...
    
		
    7. 
						
  7. Vue项目实战：购物车页面实现与ElementUI集成
		
    目录 1. 购物车页面 Order-Header组件 购物车列表渲染 购物车全选和非全选 购物车商品更新和删除 购物车结算 2. ElementUI集成 3. Babel介绍 购物车页面 (1)Ord ...
    
		
    8. 
						
  8. 第十四篇 表单控件 - 购物车页面
		
    上一篇内容 已经简单的介绍了表单控件以及表单控件的绑定,有登录界面输入的用户信息(userInfo)是否需要启动 "记住" 功能,"记住" 是一个记录登录状态, ...
    
		
    9. 
						
  9. 淘宝购物车页面 智能搜索框Ajax异步加载数据
		
    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 工作中总结的一些C#小经验，随时更新
		
    2. 
						
  2. DevOps简单介绍
		
    3. 
						
  3. codeforces 153d（日期转换）特殊题目
		
    4. 
						
  4. fedora 15怎么修改运行级别？
		
    5. 
						
  5. 求你了，别再说数据库锁的只是索引了！！！
		
    6. 
						
  6. matlab地址结构与转换,matlab数据类型和转换
		
    7. 
						
  7. 字符串中去除连续相同的字符保留一个
		
    8. 
						
  8. 线段树模板（HDU 6356 Glad You Came）
		
    9. 
						
  9. 2018年9月28号-10月9号
		
    10. 
						
  10. 面试要10K，HR说你只值7K，怎么斗得过？
		
    11. 
						
  11. Android系统启动流程分析
		
    12. 
						
  12. Adobe Photoshop简介
		
    13. 
						
  13. 可用主机ip地址数量的计算
		
    14. 
						
  14. perl中正则匹配中文字符
		
    15. 
						
  15. 哈夫曼树 (100分)哈夫曼树
		
    16. 
						
  16. Linux Ext 文件系统
		
    17. 
						
  17. 艰难的一年！2021年计算机考研年度总结！
		
    18. 
						
  18. 导入semantic-ui-css/semantic.min.css样式失败
		
    19. 
						
  19. 【Simulink教程案例12】基于BPSK+costas环载波同步的simulink建模与仿真分析
		
    20. 
						
  20. 基于原生JavaScript实现的消消乐小游戏
		
    21. 
		

	


热门文章
	

    
									
  1. 机器人D-H矩阵分析（SCARA机器人为例）
			
    2. 
						
  2. aix oracle备份命令,Aix/Linux下自动备份oracle数据库
			
    3. 
						
  3. threejs学习（十一）非全屏canvas下，射线拾取坐标错位问题
			
    4. 
						
  4. 大数据基础——统计学
			
    5. 
						
  5. 推荐一款免费的带有坐标系的在线绘图web应用（汇报神器）
			
    6. 
						
  6. 线性表的顺序、链式存储结构基本操作
			
    7. 
						
  7. CCIE与HCIE哪个含金量高些？
			
    8. 
						
  8. YII2 with的使用
			
    9. 
						
  9. Quartz-cron表达式
			
    10. 
						
  10. 育儿-《养育女孩》书中的精髓：父母如何理解女孩的每个成长阶段，更好地培养女孩？
			
    11.