点击增加或者减少商品数量并且自动计算总价格

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击增加或者减少商品数量并且自动计算总价格相关的知识，希望对你有一定的参考价值。

点击增加或者减少商品数量并且自动计算总价格:
本章节介绍一下如何实现点击按钮来添加或者删除商品的数量，并且能够自动计算商品的总价格。
代码实例如下:

<!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 type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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的Number对象的toFixed()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13693

更多内容可以参阅:http://www.softwhy.com/jquery/

以上是关于点击增加或者减少商品数量并且自动计算总价格的主要内容，如果未能解决你的问题，请参考以下文章

js实现的购物车选中商品实现计算商品总价格

Android-----购物车（包含侧滑删除，商品筛选，商品增加和减少，价格计算，店铺分类等）

angularjs购物车练习

jquery实现的购物车商品数量变化，价格随之变动，但是总价格怎么跟着变啊？

Vue.js实例：开发购物车

Vue.js实例：开发购物车