原生射流研究…模拟淘宝购物车项目实战

本文实例讲述了原生射流研究…模拟淘宝购物车实现代码。分享给大家供大家参考。具体如下：

通过Java脚本语言实现类似与淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图：

相应的代码：

shoppingCart.html

！DOCTYPE htmlhtmlhead元字符集='UTF-8 '标题实现购物车项目实战/title link rel='样式表type='text/css' href=' ./css/shoppingCart.css '脚本类型=' text/JAVAScript ' src=' http :/js/购物车。js '/script/head body表id=' CartTable '和tr class=' order _ content ' thin put class=' check _ all check ' type=' checkbox '/input全选/th商品/th单价/th数量/th小计/th操作/th/tr/ad t正文tr class=' order _ content ' TD class=' check ' input class=' check _ one check ' type=' checkbox '/input/TD TD TD class=' goods ' img src=' http :/imgs/apple6s。png ' spangphone 6S/span/TD TD class=' price ' 5099.88/TD TD TD class=' count ' span class=' reduce '-/span input class=' count _ input ' type=' text ' value=' 1 '/input span class=' add '/span/TD TD class=' sub tole ' 5099.88/TD TD TD class=' operation ' span class=' delete '删除span/TD/tr class=' order _ content ' TD class=' check ' input class=' check _ one check ' type=' checkbox '/input/TD TD TD class=' goods ' img src=' http : /imgs/macbook。png ' span macbook Air/span/TD TD TD class=' price ' 1099.99/TD TD TD class=' count ' span class=' reduce '-/span input class=' count _ input ' type=' text ' value=' 1 '/input span class=' add '/span/TD TD class=' subotle ' 1099.99/TD TD class=' operation ' span class=' delete '删除span/TD/tr class=' order _ content ' TD class=' check '输入class=' check _ one check ' type=' checkbox '/input/TD TD TD class=' goods ' img src=' http : /imgs/IPA dmini。png ' span pad mini 2银16g WLAN7.9英寸/span/TD class=' price ' 6599.00/TD TD TD class=' count ' span class=' reduce '-/span input class=' count _ input ' type=' text ' value=' 1 '/input span class=' add '/span/TD TD class=' subtole ' 6599.00/TD TD TD TD class=' operation ' span class=' delete '删除span/TD/tr TD class=' check '输入class=' check _ 一个复选标记“type=”复选框/input/TD TD class=“goods”img src=“http : /imgs/apple watch。png ' span watch EXTS Min/span/TD TD class=' price ' 9998.68/TD TD TD class=' count ' span class=' reduce '-/span input class=' count _ input ' type=' text ' value=' 1 '/input span class=' add '/span/TD TD class=' sub tole ' 9998.68/TD TD TD class=' operation ' span class=' delete '删除span/TD/tr/t body/table div class='选定视图' div id='选定视图列表' class='清除修复'！-div mg src=' http :/imgs/applewatch.png'span取消选择/span/div - /div span class='arrow '，/span/span/div div id=' footer ' class=' footer ' label class=' fl select _ all ' input class=' check _ all check ' type=' checkbox '全选/input/label a class=' fl delete _ all ' id=' delete all ' href=' JavaScript :'删除/a div class='fr closing '结算/div div class='fr selected_totle '合计：span id='价格totle ' 0.00/span/div class=' fr selectAll ' id=' selected '已购商品span id='selectTotle'0/span件span=' arow up '/span span=' arow down '-/span/div/div/body/HTMlsshoppingCart。射流研究…

window.onload=function(){ //低版本的工业管理学(工业工程)浏览器不支持getElementByClassName方法，考虑兼容性，重写方法如果(!文件。getelementbyclass name){ document。getelementbyclass name=function(cls){ var ret=[]；var clselements=文档。getelementsbytagname(' * ')；for (var i=0，len=clsElments.length我透镜；i ) { //考虑一个标签有多个班级的情况，这里用正则表达式会好一点if(CLselections[I]).类名==cls | |(clselections[I]。类名。(cls ' ')=0的索引)| |(clselections[I]。类名。的索引(' cls ' ')=0)| |(clselections[I]。类名。的索引(' cls)=0)){ ret。推送(clselections[I])；} }返回ret} } var购物车表=文档。getelementbyid('购物车表')；var tr=cartTable.children[1].行；//表格标签特有的属性，行可以获得表格元素的所有tr行var CheckInput=文档。GetElementByClassName(' check ')；//获得所有的单选框var checkAllInput=文档。getelementbyclassname(' check _ all ')；//获得所有的单选框var价格totle=文档。getelementbyid(' price totle ')；//总价var selectTotle=文档。getelementbyid(' SelectTotle ')；//已选商品var selected=文档。getelementbyid('选定')；var footer=文档。getelementbyid(' footer ')；//底部标签var选定视图列表=文档。getelementbyid('选定的视图列表')；//底部标签var delete all=文档。getelementbyid('全部删除')；//计算总价格和数量函数getotle(){ var selectNum=0；//数量var priceNum=0；//价格var HTMLstr=//缩略图的字符串拼接for (var i=0，len=tr.length我透镜；i ) { if (tr[i]).getElementsByTagName('输入')[0].选中){ tr[i].类名=' onselectNum=parseInt(tr[i]).getElementsByTagName('输入')[1].值);priceNum=parseFloat(tr[i]).细胞[4]。innerHTML)；//拼接字符串显示已经选择的商品html STr=' div mg src=' http : ' tr[I].getElementsByTagName('img')[0].src ' ' span class=' del ' index=' '取消选择/span/div '；} else{ tr[i].className=} }选择一个文件。innerHTMl=SelectNum价格总和。innerhtml=pricenum。to fixed(2)；//保留两位小数选定的视图列表。innerHTMl=HTMl字符串；} //计算小计价格函数getsubotle(tr){ var TDS=tr。细胞；var price=parseFloat(tds[2]).innerHTML)；var num=Parsent(tr。GetElementsBytagname('输入')[1].值);var SubTotle=ParseFloat(price * num).toFixed(2)；tds[4].innerHTML=subTotle} //复选框绑定单击事件for (var i=0，len=checkInput.length我透镜；i ){ checkInput[i].onclick=function (){ //判断全选按钮，变更如果(这个。类名=' check _ all check '){ for(var j=0；j lenj ){ checkInput[j].checked=this.checked} } if(this。checked==false){ for(var k=0，len 2=checkAllInput . len 2k){ checkAllInput[k].选中=假；} } GetTotle()；} } //控制底部标签的显示选中。onclick=function(){ if(footer。类名=“footer”){ footer。类名='页脚显示'；} else { footer。类名='页脚'；} } //图片缩略图的取消选择按钮功能，e为事件对象选定的视图列表。onclick=function(e){//兼容低版本的IE/* if(e){ e=e；} else { e=window . event } */var e=e | | window。事件；var el=e.srcElementif(El。类名=' del '){ var index=El。GetAttribute(' index ')；定义变量输入=tr[索引].getElementsByTagName(' input ')[0]；input.checked=falseinput。onclick()；} } //实现加减、删除操作。

同样用事件代理的方法实现for (var i=0，len 3=tr . len 3 I){ tr[I].onclick=function(e){ var e=e | | window。事件；var El=e . srcelementvar cls name=El。类名；var输入=这个。getelementsbytagname(' input ')[1]；var输入值=Parseint(输入。值)；var reduce=这个。getelementsbytagname(' span ')[1]；switch(clsName){ case ' add ' :/* parsent(inputValue)；*/输入。值=输入值1；减少。innerHTMl="-"；getsubotle(this)；打破；如果(输入值=1){ input。值=输入值-1，则大小写为reduce ' : } else { reduce . innerhtml=} GetSubtotle(this)；打破；案例"删除" : var conf=confirm('确定删除这个商品？');如果这。父节点。移除子(此)；} break default : break } GetTotle()；} //处理从手动输入商品数量tr[i].getElementsByTagName('输入')[1].onkeyup=function(){ var val=this。价值；var tr=这个。父节点。父节点；if(ISnan(val)| | val 0){ val=1；} this . value=valgetsubotle(tr)；} } //全选删除全部删除。onclick=function(){ if(selecttotle。innerhtml！=' 0 '){ var conf=conf('确定删除这些商品？');if (conf) { for (var i=0，len=tr.length我透镜；风险值输入=tr[i].getElementsByTagName(' input ')[0]；if(输入。选中){ tr[I]。父节点。移除子项(tr[I])；} } } } }}//取消选择-采用事件代理-放到父元素上shoppingCart.css。count _ input { width: 39px高度： 15px线高： 15pxborder: 1px实心# aaacolor: # 343434文本对齐：中心；padd : 4px 0；背景-color : # fff；}span.add，span.reduce { height: 23px宽度： 27pxborder: 1px固体# e5e 5；背景技术： # f0f 0；线高： 23pxcolor: # 444}。正在关闭{显示：内联块；宽度： 120像素；高度： 50px线高： 50px背景技术# f40文本对齐：中心；字体系列： '微软雅黑；font-size : 20px-web套件-边框-半径： 2px-moz-border-radius : 2px；-ms-border-radius : 2px；边界半径： 2px文本装饰：无；光标：指针；}.fr{ float:右侧；}.所选内容.选择全部，选择全部.delete _ all { margin-top : 15px；}.页脚{高： 50像素背景# e5e 5 font-family : '微软雅黑；} #选择文件，#价格文件，副标题{ color : # f40 font-weight : 700；font-size : 18pxfont-family: tohoma，arialpadding: 5px}以上就是射流研究…模拟淘宝购物车的全部项目代码，欢迎大家学习品鉴，从中得到收获。