你的位置:首页 > Java教程

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


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

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