html购物车总价,JS实现购物车计算.html

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Document

body,ul,li,p{

padding:0;

margin:0;

}

body{

background-color:#ccc;

}

ul{

width: 500px;

margin:100px auto;

}

li{

width: 400px;

height: 50px;

padding:0 50px;

list-style:none;

background-color:lightblue;

font:16px/50px microsoft yahei;

}

input{

width: 50px;

height: 30px;

margin:0 5px;

}

p{

width: 500px;

height: 50px;

margin:0 auto;

text-align:center;

font:16px/50px microsoft yahei;

background-color:pink;

}

• 0单价：12.5元 小计：0元
• 0单价：10.5元 小计：0元
• 0单价：8.5元 小计：0元
• 0单价：8元 小计：0元
• 0单价：4.51元 小计：0元

商品合计：0件，共花了：0元

所购商品中最贵的单价是：0元

var Subtract=document.getElementsByClassName("subtract");

var Plus=document.getElementsByClassName("plus");

var Num=document.getElementsByClassName("number");

var Subtotal=document.getElementsByClassName("subtotal");

var Perprice=document.getElementsByClassName("perprice");

var Piece=document.getElementsByClassName("piece")[0];

var Totalprice=document.getElementsByClassName("totalprice")[0];

var Expensive=document.getElementsByClassName("expensive")[0];

var arr=[0,0,0,0,0];

var cnt=0;

SUB(Subtract);

PLUS( Plus);

//减法运算

function SUB(sub){

for(var i=0;i

sub[i].index=i;

sub[i].οnclick=function(){

if(Num[this.index].innerHTML>0) {

Num[this.index].innerHTML--;//单个商品数量

Subtotal[this.index].innerHTML=(Perprice[this.index].innerHTML*Num[this.index].innerHTML).toFixed(2);//小计

Piece.innerHTML=--cnt;//商品总个数

(Totalprice.innerHTML-=Perprice[this.index].innerHTML).toFixed(2);//总价

if(Num[this.index].innerHTML===0) arr[this.index]=0;//选取所购商品单价最高

Expensive.innerHTML=getMax(arr);

}

}

}

}

//加法运算

function PLUS(plus){

for(var i=0;i

plus[i].index=i;

plus[i].οnclick=function(){

Num[this.index].innerHTML++;//单个商品数量

Subtotal[this.index].innerHTML=(Perprice[this.index].innerHTML*Num[this.index].innerHTML).toFixed(2);//小计

Piece.innerHTML=++cnt;//商品总个数

Totalprice.innerHTML=((Number(Totalprice.innerHTML)+Number(Perprice[this.index].innerHTML))).toFixed(2);//总价

if(Num[this.index].innerHTML!==0) arr[this.index]=Number(Perprice[this.index].innerHTML);//选取所购商品单价最高

Expensive.innerHTML=getMax(arr);

}

}

}

//对所购商品单价排序

function getMax(array){

var max=array[0];

for(var k=1;k

if(array[k]>max){

max=array[k];

}

}

return max;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史