php购物车js价钱总和,JS代码实现商品价钱总和（模拟购物车
功能）
题设的主体HTML代码如下：(以作事例)
樱桃
单价：12.5元
⼩计：0元
⾹蕉
单价：2.5元
⼩计：0元
⽕龙果
单价：8.5元
⼩计：0元
榴莲
单价：28元
⼩计：0元
车厘⼦
单价：14.5元
⼩计：0元
菠萝
单价：7元
⼩计：0元
商品合计共：0件，共花费了：0元
其中最贵的商品单价是：0元
《原⽣版》JavaScript代码如下：
var oP = ElementsByTagName('p')[0];
var aEm = oP.getElementsByTagName('em');
var aStrong = oP.getElementsByTagName('strong')[0];
var oUl = ElementById('list');
var oLi = ElementsByTagName('li');
var oStrong = ElementsByTagName('strong'); var oSpan = ElementsByTagName('span');
var oEm = ElementsByTagName('em');
var sum = 0;
var emMax = 0;
for(var i=0;i
//最⼤的那个单价值网页购物车代码
if(parseFloat(oEm[i].innerHTML)>emMax){
emMax=parseFloat(oEm[i].innerHTML);
}
aStrong.innerHTML=emMax+'元';
}
//调⽤fn1()函数实现商品数量的选取
for(var i=0;i
fn1(oLi[i]);
}
//添加点击事件获取总的商品数量
aEm[0].onclick = function(){
for(var i=0;i
var a = Number(oStrong[i].innerHTML);
sum+=a;
aEm[0].innerHTML = sum+'件';
}
sum= 0;
}
//添加点击事件获取总的价钱
aEm[1].onclick = function(){
for(var i=0;i
var a = parseFloat(oSpan[i].innerHTML);
sum+=a;
aEm[1].innerHTML = sum+'元';
}
sum= 0;
}
function fn1(aLi){
var oBtn = ElementsByTagName('input');
var oStrong = ElementsByTagName('strong')[0];
var oEm = ElementsByTagName('em')[0];
var oSpan = ElementsByTagName('span')[0];
var n1 = Number(oStrong.innerHTML);
var n2 = parseFloat(oEm.innerHTML);
oBtn[0].onclick = function(){
n1--;
if(n1<0){
n1 = 0;
}
oStrong.innerHTML = n1;
oSpan.innerHTML = n1*n2+'元';
};
oBtn[1].onclick = function(){
n1++;
oStrong.innerHTML = n1;
oSpan.innerHTML = n1*n2+'元';
};
}
}
反思：上述代码添加点击事件获取商品的总价钱数以及总的商品数量，可能增加了⽤户负担。需要改进《改进版》JavaScript代码如下：
var oP = ElementsByTagName('p')[0];
var aEm = oP.getElementsByTagName('em');
var aStrong = oP.getElementsByTagName('strong')[0]；
var oUl = ElementById('list');
var oLi = ElementsByTagName('li');
var oStrong = ElementsByTagName('strong');
for(var i=0;i
fn1(oLi[i]);
}
function fn1(aLi){
var oBtn = ElementsByTagName('input');
var oStrong = ElementsByTagName('strong')[0];
var oEm = ElementsByTagName('em')[0];
var oSpan = ElementsByTagName('span')[0];
var n1 = Number(oStrong.innerHTML);
var n2 = parseFloat(oEm.innerHTML);
//合计总价，必然要相加所有的⼩计
function fn2(){
var sum1=0;//定义⼀个临时变量，⽤来储存所加过的件数
var sum2=0;//定义⼀个临时变量，⽤来储存所加过的⼩计
var emMax=0;//定义⼀个临时变量，⽤来⽐较单价的⼤⼩
for(var i=0;i
var strongs=oLi[i].getElementsByTagName("strong")[0];//获取到所有li的数量
var spans=oLi[i].getElementsByTagName("span")[0];//获取到所有li的⼩计
var em=oLi[i].getElementsByTagName("em")[0];//获取到所有li的单价
sum1=sum1+Number(strongs.innerHTML);
sum2=sum2+parseFloat(spans.innerHTML);//合计即所有⼩计相加的结果，因为有⼩数所以要⽤parseFloat if(parseFloat(em.innerHTML)>emMax){//最⼤的那个单价值
emMax=parseFloat(em.innerHTML);
}
}
aEm[0].innerHTML=sum1+'件';
aEm[1].innerHTML=sum2+'元';
aStrong.innerHTML=emMax+'元';
}
fn2();
oBtn[0].onclick = function(){
n1--;
if(n1<0){
n1 = 0;
}
oStrong.innerHTML = n1;
oSpan.innerHTML = n1*n2+'元';
fn2();//调⽤合计之后的值
};
oBtn[1].onclick = function(){
n1++;
oStrong.innerHTML = n1;
oSpan.innerHTML = n1*n2+'元';
fn2();
};
}
}
此时总的商品件数和商品总计会随⽤户的商品选择进⾏实时改变。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。