, js淘宝购物车功能描述:
, 1点击“+”,单个商品数量加1,总数量加1;单个商品价格添加,总价也添加。
2。点击“-”,单个商品数量减1,总数量减1;单个商品价格减少,总价也减少。
,当该商品数量为0时,点击依然为0;
3。显示出总价、总数量和其中最贵的那个商品的价格只
瞄一眼效果图:
废话不多说,卢代码
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>无标题文档& lt;/title>
& lt; style>
*{填充:0;保证金:0;}
#列表,p {list-style:没有,宽度:600 px;保证金:0汽车;}
#列表li{宽度:600 px;高度:50 px;行高:50 px; margin-top: 20 px;字体大小:20 px;}
李#列表输入{宽度:60 px;高度:40 px;行高:40 px;}
.highlight{颜色:红色;字体大小:30 px;粗细:大胆;}
& lt;/style>
& lt; script>
窗口。onload=function () {
var oUl=$ (' list ');
var totalNumber=$ (' totalNum ');
var totalPrice=$ (' totalPrice ');
十var=$('严重');
阿里var=oUl.getElementsByTagName(‘李’);
var maxPrice=[0];
(var=0;我& lt;aLi.length;我+ +){
价格(aLi[我]);
}
函数的价格(奥利){
var aBtn=oLi.getElementsByTagName(“输入”);
var oStrong=oLi.getElementsByTagName(“强”)[0];
var oEm=oLi.getElementsByTagName (em) [0];
var oSpan=oLi.getElementsByTagName(跨度)[0];
aBtn [0]。onclick=function () {
var num=数量(oStrong.innerHTML);
var价格=parseFloat (oEm.innerHTML);
var数量=(totalNumber.innerHTML)数量;
var价格=parseFloat (totalPrice.innerHTML);
num -;
如果(num===0) {//如果该商品数量为0,那么就得把它的价格从价格表中清除
var指数=maxPrice.indexOf(价格);
如果(指数比;1)maxPrice。拼接(指数(1);
}else if (num & lt;0) {
num=0;
返回;
}
数字——;
oStrong。innerHTML=num;
oSpan。innerHTML=num *价格+“元”;
totalNumber。innerHTML=数字;
totalPrice。innerHTML=价格——(num + 1) *价格;
十。innerHTML=maxPrice [0];
}
aBtn [1]。onclick=function () {
var num=数量(oStrong.innerHTML);
var价格=parseFloat (oEm.innerHTML);
var数量=(totalNumber.innerHTML)数量;
var价格=parseFloat (totalPrice.innerHTML);
num + +;
数字+ +;
如果(maxPrice.indexOf(价格)& lt;0) {
maxPrice.push(价格)
maxPrice。排序(函数(a, b){返回(b - a)});
}
oStrong。innerHTML=num;
oSpan。innerHTML=num *价格+“元”;
totalNumber。innerHTML=数字;
totalPrice。innerHTML=价格+ num *价格;
十。innerHTML=maxPrice [0];
}
}
函数(id)美元{返回. getelementbyid (id);}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; ul id=傲斜怼北?
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
单价:& lt; em> 12.5元& lt;/em>
小计:& lt;跨类=傲恋恪痹?元& lt;/span>
& lt;/li>
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
单价:& lt; em> 10.5元& lt;/em>
小计:& lt;跨类=傲恋恪痹?元& lt;/span>
& lt;/li>
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
单价:& lt; em> 8.5元& lt;/em>
小计:& lt;跨类=傲恋恪痹?元& lt;/span>
& lt;/li>
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
单价:& lt; em> 8元& lt;/em>
小计:& lt;跨类=傲恋恪痹?元& lt;/span>
& lt;/li>
& lt; li>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/- "/比;
& lt; strong> 0 & lt;/strong>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/+”/比;
单价:& lt; em> 14.5元& lt;/em>
小计:& lt;跨类=傲恋恪痹?元& lt;/span>
& lt;/li>
& lt;/ul>
& lt; p>
商品合计共:& lt; span class="强调" id=皌otalNum”在0 & lt;/span>件,
共花费了:& lt; span class="强调" id=皌otalPrice”在0 & lt;/span>元& lt; br/比;
其中最贵的商品单是:& lt; span class="强调" id=笆痹? & lt;/span>元
& lt;/p>
& lt;/body>
& lt;/html>
