js实现仿购物车加减效果

效果图：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style * { margin 3360 0；padd : 0；}车身{ overflow-y : auto；} ul { margin-top : 20px；边框-top: 1px实心# 666;} h1 {宽度： 500pxmargin: 0自动颜色：深粉色；高度： 100像素；线高： 100像素；}李{列表式：无；padd : 15px 0px 15px 60pxborder-bottom :1 px实心# CCC font-size : 0px；线高： 30px/*高度： 60px*/}输入[type=button]，li strong，li em，li span，Li div { height : 30px font-size : 20px；线高： 30px文本对齐：中心；}输入[type=button]，li strong { width: 60px} li span，li em { width: 80px背景：粉色；} Li div { width : 100 px } Li strong、li span、li em、Li div { display : in-block；}/样式脚本窗户。onload=function(){ var OUl=document。getelementbyid(' list ')；瓦尔阿里=OUl。GetElementsBytagname(' Li ')；for(var I=0；iali . lengthi){ fn1(AlI[I])；}函数fn1(AlI){ var aBtn=AlI。getelementsbytagname(' input ')；var aStrong=AlI。GetElementsBytagname(' strong ')[0]；var aEm=AlI。GetElementsBytagname(' em ')[0]；var aSpan=AlI。GetElementsBytagname(' span ')[0]；var num=Number(天文数字。innerhtml)；//astrong。innerhtml=' 0 ' var price=parseFloat(AEM。innerhtml)；//aEm.innerHTML='12.9 '元aBtn[0].onclick=function(){ if(num0){ num-；astrong . innerHTMl=Numaspan . innerHTMl=(num * price).' toFixed(1)'元} } aBtn[1].onclick=function(){ num；astrong . innerHTMl=Numaspan . innerHTMl=(num * price).' toFixed(1)'元} } }/脚本/头体氕点点看，仿购物车-效果/h1 ul id='list' li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' '/div class='s1 '单价：/潜水12.9元/em div class='s1 '共计：/divspan0/span /li li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' '/div class='s1 '单价：/潜45.7元/em div class='s1 '共计：/divspan0/span /li li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' '/div class='s1 '单价：/潜水67.5元/em div class='s1 '共计：/divspan0/span /li li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' '/div class='s1 '单价：/潜水14.7元/em div class='s1 '共计：/divspan0/span /li li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' '/div class='s1 '单价：/潜45.6元/em div class='s1 '共计：/divspan0/span /li li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' '/div class='s1 '单价：/潜水32.4元/em div class='s1 '共计：/divspan0/span /li /ul /body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！