JavaScript購物車計算商品總價格

admin發表於2017-03-24
JavaScript

下面是一個簡單程式碼，實現計算購物車商品總價格的效果，在實際中不可能有這樣的購物車，可以利用此程式碼學習一些相關知識，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script type="text/javascript"> 
function checkAll(ev){  
  var ev=event||ev
  var allNode=ev.target;
  var item=document.getElementsByName("item"); 
  for(var x=0;x<item.length;x++){ 
    item[x].checked = allNode.checked; 
  } 
}
function getSum(){ 
  var item=document.getElementsByName("item"); 
  var sum=0; 
  for(var x=0;x<item.length;x++){ 
    if(item[x].checked){ 
      sum+=parseInt(item[x].value); 
    } 
  } 
  var spanNode = document.getElementById("sum"); 
  spanNode.innerHTML = (sum+"元").fontsize(7); 
} 
window.onload=function(){
  var numbt=document.getElementById("numbt");
  var allbt=document.getElementById("allbt");
  numbt.onclick=function(){
    getSum()
  }
  allbt.onclick=function(){
    checkAll()
  }
}
</script> 
</head> 
<body> 
<input type="checkbox" name="all" id="allbt"/>全選<br /> 
<input type="checkbox" name="item" value="3000" />膝上型電腦：3000元<br /> 
<input type="checkbox" name="item" value="2500" />臺式電腦：2500元<br /> 
<input type="checkbox" name="item" value="1500" />數位相機：1500元<br /> 
<input type="checkbox" name="item" value="1000" />手機：1000元<br /> 
<input type="checkbox" name="item" value="200" />記憶體條：200元<br /> 
<input type="checkbox" name="item" value="20" />資料線：20元<br /> 
<input type="checkbox" name="item" value="100" />攝像頭：100元<br /> 
<input type="button" value="獲取總金額" id="numbt"/> 
<span id="sum"></span> 
</body> 
</html>

實現全選和不全選效果，並且能夠計算總金額，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function checkAll(ev){}，此函式可以實現核取方塊的全選和不全選效果，ev是事件物件。

（2）.var ev=event||ev，獲取相容所有瀏覽器的事件物件。

（3）.var allNode=ev.target，獲取事件源物件。

（4）.var item=document.getElementsByName("item")，獲取name屬性值為item的元素集合。

（5）.for(var x=0;x<item.length;x++){item[x].checked = allNode.checked;} ，遍歷集合中的每一個元素，然後將它們的checked屬性值設定為點選的核取方塊的checked屬性值。

（6）.function getSum(){}，實現計算總價格效果。

（7）.var item=document.getElementsByName("item")，獲取name屬性值為item的元素集合。

（8）.var sum=0，宣告一個變數用來儲存金錢數額。

（9）.for(var x=0;x<item.length;x++)，遍歷每一個元素。

（10）.if(item[x].checked){sum+=parseInt(item[x].value);} ，如果是選中的，那麼將value屬性值算入價格總額。

（11）.var spanNode = document.getElementById("sum")，獲取span元素物件。

（12）.spanNode.innerHTML = (sum+"元").fontsize(7)，設定字型的大小，將內容寫入span元素。

二.相關閱讀:

（1）.var ev=event||ev參閱var ev=window.event||ev的作用是什麼一章節。

（2）.ev.target參閱JavaScript event.target一章節。

（3）.getElementsByName()參閱document.getElementsByTagName()一章節。

（4）.parseInt()參閱js parseInt()一章節。 

（5）.innerHTML屬性參閱js innerHTML一章節。

相關文章