JavaScript实现类似淘宝的购物车效果

前言

相信大家都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。本文介绍的是通过Java脚本语言实现类似于淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能。

功能如下

1.实现兼容低版本工业管理学(工业工程)的getElementsByClassName()方法

2.射流研究…表格操作

3.通过parseInt()，parseFloat()把字符串转换成数字

4.通过toFixed()把数字格式化成指定位数的小数

5.事件代理的运用

效果图：

边界崩溃有两个值可以选择，分别是倒塌和分开，就是合并边框和分离边框，分离边框之下又可以设置间距和边框样式

边框间距：2 em 4em（设置右间距和下间距)

边框样式：none实线虚线虚线；（分别设置上右下左的样式)

超文本标记语言结构：

表id='cartTable '和tr thlabel输入类=' check-all check '类型=' checkbox '/全选/标签/th商品/th单价/th数量/th小计/th操作/th/tr/ad t body tr TD class=' checkbox ' input class=' check-one check ' type=' checkbox '/TD TD TD TD class=' goods ' img src=' http : images/1。jpg ' alt=' '/span casio/卡西欧EX-TR350/span/TD TD class=' price ' 5999.88/TD TD class=' count ' span class=' reduce '/span put class=' count-input ' type=' text ' value=' 1 '/span class=' add '/span/TD TD class=' subtotal ' 5999.88/TD class=' operation ' span class=' delete '删除/span/TD/tr TD class=' checkbox ' input class=' check-one check ' type=' checkbox '/TD TD TD class=' goods ' img src=' http : images/2。jpg ' alt=' '/span canon/佳能PowerShot SX50 HS/span/TD TD TD TD class=' price ' 3888.50/TD TD TD class=' count ' span class=' reduce '/span put class=' count-input ' type=' text ' value=' 1 '/span class=' add '/span/TD TD class=' subtotal ' 3888.50/TD class=' operation ' span class=' delete '删除/span/TD/tr TD class='复选框input class=' check-one check ' type=' checkbox '/TD TD TD class=' goods ' img src=' http : images/3。jpg ' alt=' '/SPanSony/索尼DSC-WX300/span/TD TD TD class=' price ' 1428.50/TD TD TD class=' count ' span class=' reduce '/span put class=' count-input ' type=' text ' value=' 1 '/span class=' add '/span/TD TD class=' subtotal ' 1428.50/TD TD class=' operation ' span class=' delete '删除/span/TD/tr TD class=' checkbox ' input class=' check-one check ' type=' checkbox '/TD TD TD class=' goods ' img src=' http : images/4。jpg ' alt=' '/spanFujifilm/富士instax mini 25/span/TD TD class=' price ' 640.60/TD TD class=' count ' span class=' reduce '/span put class=' count-input ' type=' text ' value=' 1 '/span class=' add '/span/TD TD class=' subtotal ' 640.60/TD TD TD class=' operation ' span class=' delete '删除/span/TD/tr/t body/tablediv class=' foot ' id=' foot ' label class=fl select-all ' input type=' checkbox ' class=' check-all check '/全选/label a class=' fl delete ' id=' delete all ' href=' JavaScript : rel='外部' nofollow '删除/a div class='fr closing '结算/div类=fr总计合计：span id='总价' 0.00/span/div class=' fr select ' id=' selected '已选商品span id='selectedTotal'0/span件span class=' arrow up'︽/spanspan class=' arrow down'︾/span/div div class=' selected-view ' div id=' selected view list ' class=' clear fix ' div mg src=' http : images/1。jpg ' span取消选择/span/div/span class=' arrow 'span/span/span/div/div CSS代码：

* { margin : 0；padd : 0；} a { color: # 666文本装饰：无；}车身{ padding:20pxcolor: # 666 }。fl{ float:左侧；} .fr{ float:右侧；}表格{边框-折叠：折叠；边框间距： 0;边框： 0；文本对齐：中心；宽度： 937 px} th，TD { border : 1px solid # cadeff } th { background : # e2f2ffborder-top 3: 3px实心# a7cbffheight : 30px } TD { padd : 10pxcolor : # 444 } t body tr :悬停{背景： RGB(238，246，255)；} .复选框{ width: 60px}。货物{宽度： 300px}。货物跨度{宽度： 180像素边距-top : 20px；文本-左对齐：向左浮动：} .价格{宽度： 130px}。计数{ width: 90px}。数数。添加，计数输入，数数。向左减少{ float:左边距：-1px；相对位置：z-index : 0；} .数数。添加，数数。降低{ height: 23px宽度： 17pxborder: 1px固体# e5e 5；背景技术： # f0f 0；文本对齐：中心；线高： 23pxcolor: # 444}。计数加：悬停.数数。降低：悬停{ color : # f50z-index : 3；边框-颜色： # f60光标：指针；} .计数输入{宽度： 50像素高度： 15px线高： 15pxborder: 1px实心# aaacolor: # 343434文本对齐：中心；padd : 4px 0；背景-color : # fff；z-index : 2；} .小计{宽度： 150像素颜色：红色；字体粗细：粗体；} .操作{ width: 80px}。操作span:hover，a:hover{ cursor:指针；颜色：红色；文本修饰：下划线；} img { width: 100px高度： 80px右边距： 10px向左浮动：} .foot { width : 935 pxmargin-top : 10px；颜色： # 666高度： 48pxborder: 1px固体# c8 c8背景-图像：线性-渐变(RGB(241，241，241)，RGB(226，226，226))；相对位置：z指数： 8；} .foot div .英尺a {线高： 48px高度： 48px} .脚选择所有{宽度： 100像素；高度： 48px线高： 48px左衬垫left: 5pxcolor: # 666}。脚。关闭{边框-左侧： 1px实心# c8 c8宽度： 100像素；文本对齐：中心；color: # 000font-weight:粗体；背景： RGB(238，238，238)；光标：指针；} .脚。总计{ margin: 0 20pxcursor:指针；} .英尺#价格总计，脚# selectedTotal { color : red字体系列： '微软雅黑；字体粗细：粗体；} .脚。选择cursor:指针；} .脚。选择。箭头{位置：相对；top :-3px；左边距left: 3px}。脚。选择。向下{相对位置：top: 3pxdisplay:无；} .展示。选择向下{ display: inline}。展示。选择高达{ display: none}。脚选择：悬停。箭头{ color:红色；} .脚。选定视图{ width: 935pxborder: 1px固体# c8 c8绝对位置：height: auto背景# fffz-index : 9；bottom : 48pxleft :-1px；显示器：无；} .展示选定视图{显示器： }块；} .脚选定视图div { height : auto} .脚。选定视图箭头{ font-size : 16px线高： 100%;color: # c8c8c8绝对位置：right : 330 px bottom :-9px；} .脚。选定视图。箭头跨度{ color: # fff绝对位置：左： 0；bottom: 1px} #选定视图列表{ padd : 20px边距-底部：-20px；} # selectedViewList div { display : inline-block；相对位置：宽度： 100像素；高度： 80pxborder: 1px固体# cccmargin: 10px} #选定视图列表div span { display : nonecolor : # ffffont-size : 12px；绝对位置：top : 0；右： 0；宽度： 60px高度： 18px线高： 18px文本对齐：中心；背景： RGBA(0，0，0，5);光标：指针；} # selectedViewList div :悬停跨度{ display : }块；}js部分：

1)实现商品的全选功能及数量和价格的计算

var购物车表=文档。getelementbyid('购物车表')；var tr=cartTable.children[1].行；//获取桌子下的tbody下的每一行var检查输入=文档。getelementsbyclassname(' check ')；var checkAllInputs=文档。getelementsbyclassname(' check-all ')；var selectedTotal=文档。getelementbyid(' selectedTotal ')；var价格合计=文件。getelementbyid('价格总计')；//计算总数和价格函数getTotal(){ var selected=0；var price=0；for(var I=0；长度；i ){ if(tr[i]).getElementsByTagName('输入')[0].选中){ selected=parseInt(tr[i]).getElementsByTagName('输入')[1].值);price=parseFloat(tr[i]).细胞[4]。innerHTML)；//单元格属性为获得tr下面的TD } }选择了total。innerhtml=选中；价格合计。innerhtml=价格。to fixed(2)；//保留两位小数} for(var I=0；icheckinputs . lengthi){ 0检查输入[i].onclick=function(){ if(this。类名==' check-all check '){//如果点击的是全选按钮，则使所有按钮的状态和它相同for(var j=0；jcheckinputs . length j){ checkInputs[j].checked=this . checked } } if(this . checked==false){//如果其中一个变为未选中状态，则使全选按钮取消选中for(var I=0；icheckalinputs . lengthi){ checkAllInputs[I].选中=假；} } GetTotal()；} }2)点击已选商品实现商品预览浮层的功能

点击已选商品时会显示出已选择商品的列表

同时在getTotal()函数中增加新创建的差异

射流研究…代码：

函数getTotal(){ var selected=0；var price=0；var html str=for(var I=0；长度；i ){ if(tr[i]).getElementsByTagName('输入')[0].选中){ tr[i].类名=' onselected=parseInt(tr[i]).getElementsByTagName('输入')[1].值);price=parseFloat(tr[i]).细胞[4]。innerHTML)；//单元格属性为获得tr下面的TD HTMl STr=' div mg src=' http : ' tr[I].getElementsByTagName('img')[0].src "跨度"取消选择/span/div '；} else{ tr[i].className=} } selectedtotal。innerhtml=选中；价格合计。innerhtml=价格。to fixed(2)；//保留两位小数选定的视图列表。innerHTMl=HTMl字符串；if(selected==0){ foot。类名=' foot} } for(var I=0；icheckinputs . lengthi){ 0检查输入[i].onclick=function(){ if(this。类名==' check-all check '){//如果点击的是全选按钮，则使所有按钮的状态和它相同for(var j=0；jcheckinputs . length j){ checkInputs[j].checked=this . checked } } if(this . checked==false){//如果其中一个变为未选中状态，则使全选按钮取消选中for(var I=0；icheckalinputs . lengthi){ checkAllInputs[I].选中=假；} } GetTotal()；} }已选择。onclick=function(){ if(foot。类名=' foot '){ if(selectedtotal。innerhtml！=0){ foot。类名='足显'；} } else { foot.className=' foot} }3)商品列表中的取消选择与事件代理

已选商品列表中没有附录子的时候差异和跨度都不存在，所以要使用事件代理。

选定的视图列表。onclick=function(e){ var El=e . srcelelement；if(El。类名=' del '){ var index=El。GetAttribute(' index ')；定义变量输入=tr[索引].getElementsByTagName(' input ')[0]；input.checked=falseinput。onclick()；} }4)实现增减商品数量及小计价格的计算

//增减商品数量事件代理for(var I=0；itr.lengthi ){ tr[i].onclick=function(e){ e=e | | window。事件；var El=e . srcelementvar cls=El . classnamevar输入=this。getelementsbytagname(' input ')[1]；var val=ParSeint(输入。值)；var reduce=这个。getelementsbytagname(' span ')[1]；开关(cls){ case ' add ' :输入。value=val 1；减少。innerHTMl="-"；getsubTotal(这个);打破；case ' reduce ' : if(val 1){ input。value=val-1；getsubTotal(这个);} else { reduce . innerhtml=} } GetTotal()；} tr[i].getElementsByTagName('输入')[1].onkeyup=function(){ var val=ParSeint(这。值)；var tr=这个。父节点。父节点；//这个指的是当前的输入，其父节点的父节点就是当前的tr var reduce=tr。getelementsbytagname(' span ')[1]；if(isNaN(val)| | val 1){ val=1；} this.value=val//保证输入框中都是大于一的纯数字if(val=1){ reduce。innerhtml=} else { reduce。innerHTMl=“-”；} getsubTotal(tr)；getTotal()；} }5)实现删除商品功能

学会用为循环删除数组中的一些数据时要回置下标我。

//删除商品全部删除。onclick=function(){ if(selected total。innerhtml！=' 0 '){ var conf=conf('确定要删除所选商品吗');if(conf){ for(var I=0；itr . lentigi){ var输入=tr[i].getElementsByTagName(' input ')[0]；if(输入。选中){ tr[I]。父节点。移除子项(tr[I])；我-；//因为删除数组中的一个后，后面的索引就会向前移，此时要让我也向前移一个，回置下标I } } GetTotal()；} } }总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。