原生射流研究…实现淘宝购物车功能

射流研究…淘宝购物车功能描述：

1、点击" ",单个商品数量加1,总数量加1;单个商品价格添加，总价也添加。2.点击"-",单个商品数量减1,总数量减1;单个商品价格减少，总价也减少。当该商品数量为0时，点击依然为0;3.显示出总价，总数量和其中最贵的那个商品的价格。

瞄一眼效果图：

废话不多说，LU代码

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style * { padd :0；margin:0}#list，p { list-style : none；宽度宽度：600pxmargin:0 auto} #列表li {宽度：600px高度：50 px线高：50 px页边距-顶部：20 pxfont-size :20 px} #列表li输入{宽度：60像素高度：40 px线高：40 px}.突出显示{ color : redfont-size :30 px；字体粗细：加粗；}/style脚本窗口。onload=function(){ var OUl=$(' list ')；var total number=$(“total num”)；var TotalPrice=$(' TotalPrice ')；定义变量最贵=$('最贵');瓦尔阿里=OUl。GetElementsBytagname(' Li ')；var MaxPrice=[0]；for(var I=0；I AlI . LengThI){ price(AlI[I])；}函数价格(OLi){ var aBtn=OLi。getelementsbytagname(' input ')；var oStrong=OLi。GetElementsBytagname(' strong ')[0]；var OEm=OLi。GetElementsBytagname(' em ')[0]；var OspAN=OLi。GetElementsBytagname(' span ')[0]；aBtn[0].onclick=function(){ var num=Number(ostron。innerhtml)；var price=parseFloat(OEm。innerhtml)；变量数=数(总数。innerhtml)；var prices=parseFloat(总价。innerhtml)；num-；if (num===0) { //如果该商品数量为0,那么就得把它的价格从价格表中清除var index=maxPrice.indexOf(价格);if(index-1)MaxPrice。拼接(索引，1)；} else if(num 0){ num=0；返回；}个数字-;ostrong . innerhtml=num ' ospan . innerhtml=num * price '元；total number . innerHTMl=numberstotal price。innerhtml=prices-(num 1)* price；MostPremium。InnerHTML=MaxPrice[0]；} aBtn[1]。onclick=function(){ var num=Number(ostron。innerhtml)；var price=parseFloat(OEm。innerhtml)；变量数=数(总数。innerhtml)；var prices=parseFloat(总价。innerhtml)；数量；数字；if(MaxPrice。indexof(price)0){ MaxPrice。推(价)MaxPrice。排序(函数(a，b){返回B- a })；} ostrong . innerhtml=num ' ospan . innerhtml=num * price '元；total number . innerHTMl=numberstotal price。innerhtml=prices num * priceMostPremium。InnerHTML=MaxPrice[0]；} } function $(id){返回文档。getelementbyid(id)；} }/script/head dyul id=' list ' Li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' ' /单价：em12.5元/em小计：span class='highlight'0元/span /li li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' ' /单价：em10.5元/em小计：span class='highlight'0元/span /li li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' ' /单价：em8.5元/em小计：span class='highlight'0元/span /li li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' ' /单价：em8元/em小计：span class='highlight'0元/span /li li输入类型='按钮'值='-'/strong0/strong输入类型='按钮'值=' ' /单价：em14.5元/em小计：span class='highlight'0元/span /li/ulp商品合计共：span class=' highlight ' id=' TotalNum ' 0/span件，共花费了：span class=' highlight ' id=' TotalPrice ' 0/span元br /其中最贵的商品单是：span class=' highlight ' id=' MostPremium ' 0/span元/p/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。