JS代碼實現商品價錢總和(模擬購物車功能)

時間 2020-05-08

標籤代碼實現商品價錢總和模擬購物車功能欄目 JavaScript 简体版

原文原文鏈接

題設的主體HTML代碼以下：（以做事例）函數

<body>spa

<ul id="list">blog

<li>櫻桃<br>事件

<input type="button" value="-" />ip

<strong>0</strong>get

<input type="button" value="+" />input

單價：<em>12.5元</em>io

小計：<span>0元</span>function

</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>

此時總的商品件數和商品總計會隨用戶的商品選擇進行實時改變。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。