購物車自動計算商品總價格

admin發表於2019-01-21

本章節介紹一下如何實現點選按鈕來新增或者刪除商品的數量，並且能夠自動計算商品的總價格。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
span{
  color:red;
  cursor:pointer;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript">
$(function(){
  $("#quantity").keyup(function(){
    if(isNaN($(this).val())||parseInt($(this).val())<1){
      $(this).val("1");
      $("#totalPrice").html($("#price").val());
      return;
    }
    var total=parseFloat($("#price").val())*parseInt($(this).val());
    $("#totalPrice").html(total.toFixed(2));
  })
   
  $("#add").click(function(){
    numAdd();
  });
   
  $("#del").click(function(){
    numDec();
  });
})
/*商品數量+1*/
function numAdd(){
  var num_add = parseInt($("#quantity").val())+1;
  if($("#quantity").val()==""){
    num_add = 1;
  }
  $("#quantity").val(num_add);
  var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
  $("#totalPrice").html(total.toFixed(2));
}
/*商品數量-1*/
function numDec(){
  var num_dec = parseInt($("#quantity").val())-1;
  if(num_dec<1){
    //購買數量必須大於或等於1
    alert("not lt 1");
  }
  else{
    $("#quantity").val(num_dec);
    var total = parseFloat($("#price").val())*parseInt($("#quantity").val());
    $("#totalPrice").html(total.toFixed(2));
  }
}
</script>
</head>
<body>
<p>
  數量:<span id="del">-</span> 
  <input type="text" id="quantity" /> 
  <span id="add">+</span>
</p>
<p class="sdsd">
  總價格:<span id="totalPrice">28.10</span>
</p>
<input type="hidden" value="28.1" id="price" />
</body>
</html>

點選左右按鈕可以實現上篇的增減，並且能夠自動計算總價格，在文字框手動寫入數量的時候也能夠自動計算總價格，下面介紹一下它的實現過程:

一.程式碼註釋:

（1）.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$("#quantity").keyup(function(){})，為文字框註冊keyup事件處理函式。

（3）.if(isNaN($(this).val())||parseInt($(this).val())<1)，判斷文字框中的內容是否非數字或者小於1.

（4）.$(this).val("1")，將文字框的內容設定為1。

（5）.$("#totalPrice").html($("#price").val())，將顯示價格的span元素的內容設定為id屬性值為price提供的價格。

（6）.return，跳出函式的執行。

（7）.var total=parseFloat($("#price").val())*parseInt($(this).val())，計算商品的總價格。

（8）.$("#totalPrice").html(total.toFixed(2))，將總價格寫入span元素。

（9）.$("#add").click(function(){}),註冊事件處理函式，點選可以新增商品數量。

（10）.$("#del").click(function(){})，註冊事件處理函式，點選可以刪除商品數量。

（11）.function numAdd(){}，此函式可以新增商品數量並且能夠自動計算總價格。

（12）.var num_add = parseInt($("#quantity").val())+1，將文字框數字值加1.

（13）.if($("#quantity").val()==""){num_add = 1;}，如果文字框的內容為空，則將num_add值設定為1。

（14）.$("#quantity").val(num_add)，設定文字框的值。

（15）.var total = parseFloat($("#price").val())*parseInt($("#quantity").val())，計算總價格。

（16）.$("#totalPrice").html(total.toFixed(2))，對價格進行保留兩位小數處理，並寫入span。

二.相關閱讀:

（1）.isNaN()參閱JavaScript isNaN()一章節。

（2）.parseInt()參閱JavaScript parseInt()一章節。 

（3）.html()參閱jQuery html()一章節。 

（4）.parseFloat()參閱JavaScript parseFloat()一章節。 

（5）.toFixed()參閱JavaScript toFixed()一章節。

相關文章