当前位置：首页 > Web开发 > 正文

可能增加了用户负担

2024-03-31 Web开发

题设的主体HTML代码如下：（以作事例）

<body>

<ul>

单价：<em>12.5元</em>

小计：<span>0元</span>

</li>

单价：<em>2.5元</em>

小计：<span>0元</span>

</li>

单价：<em>8.5元</em>

小计：<span>0元</span>

</li>

单价：<em>28元</em>

小计：<span>0元</span>

</li>

单价：<em>14.5元</em>

小计：<span>0元</span>

</li>

单价：<em>7元</em>

小计：<span>0元</span>

</li>

</ul>

<p>

商品合计共：<em>0件</em>，共花费了：<em>0元</em><br />

此中最贵的商品单价是：<strong>0元</strong>

</p>

</body>

《原生版》JavaScript代码如下：

window.onload = function(){

var oP = document.getElementsByTagName(‘p‘)[0];

var aEm = oP.getElementsByTagName(‘em‘);

var aStrong = oP.getElementsByTagName(‘strong‘)[0];

var oUl = document.getElementById(‘list‘);

var oLi = oUl.getElementsByTagName(‘li‘);

var oStrong = oUl.getElementsByTagName(‘strong‘);

var oSpan = oUl.getElementsByTagName(‘span‘);

var oEm = oUl.getElementsByTagName(‘em‘);

var sum = 0;

var emMax = 0;

for(var i=0;i<oEm.length;i++){

//最大的阿谁单价值

if(parseFloat(oEm[i].innerHTML)>emMax){

emMax=parseFloat(oEm[i].innerHTML);

}

aStrong.innerHTML=emMax+‘元‘;

}

//挪用fn1（）函数实现商品数量的拔取

for(var i=0;i<oLi.length;i++){

fn1(oLi[i]);

}

//添加点击事件获取总的商品数量

aEm[0].onclick = function(){

for(var i=0;i<oStrong.length;i++){

var a = Number(oStrong[i].innerHTML);

sum+=a;

aEm[0].innerHTML = sum+‘件‘;

}

sum= 0;

}

//添加点击事件获取总的代价

aEm[1].onclick = function(){

for(var i=0;i<oSpan.length;i++){

var a = parseFloat(oSpan[i].innerHTML);

sum+=a;

aEm[1].innerHTML = sum+‘元‘;

}

sum= 0;

}

function fn1(aLi){

var oBtn = aLi.getElementsByTagName(‘input‘);

var oStrong = aLi.getElementsByTagName(‘strong‘)[0];

var oEm = aLi.getElementsByTagName(‘em‘)[0];

var oSpan = aLi.getElementsByTagName(‘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+‘元‘;

};

}

</script>

技术图片

反思：上述代码添加点击事件获取商品的总代价数以及总的商品数量，可能增加了用户承担。需要改造

《改造版》JavaScript代码如下：

window.onload = function(){

var oP = document.getElementsByTagName(‘p‘)[0];

var aEm = oP.getElementsByTagName(‘em‘);

var aStrong = oP.getElementsByTagName(‘strong‘)[0]；

var oUl = document.getElementById(‘list‘);

var oLi = oUl.getElementsByTagName(‘li‘);

var oStrong = oUl.getElementsByTagName(‘strong‘);

for(var i=0;i<oLi.length;i++){

fn1(oLi[i]);

}

function fn1(aLi){

var oBtn = aLi.getElementsByTagName(‘input‘);

var oStrong = aLi.getElementsByTagName(‘strong‘)[0];

var oEm = aLi.getElementsByTagName(‘em‘)[0];

var oSpan = aLi.getElementsByTagName(‘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<oLi.length;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();

};

}

</script>

此时总的商品件数和商品总计会随用户的商品选择进行实时转变。

JS代码实现商品代价总和(模拟购物车成果)

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31254.html

上一篇：About HTML
下一篇：使用 html2canvas 将页面中某一部分转为图片下载

可能增加了用户负担

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢