jQuery计算两个文本框中数字之和

jQuery计算两个文本框中数字之和

分类： JavaScript 2011-09-30 15:42 98人阅读 评论(0) 收藏 举报

下面是用jQuery做的，计算两个文本框中数字之和，没有考虑精度的。

view plaincopy to clipboardprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3. <head> 
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> 
  5. <scripttype="text/javascript"src="http://www.cnblogs.com/jQuery/jquery.js"></script> 
  6. <scripttype="text/javascript"> 
  7.     $(function(){ 
  8.         var first = $("#first");// 获得ID为first标签的jQuery对象 
  9.         var second = $("#second");// 获得ID为first标签的jQuery对象 
  10.         var sumSP = $("#sumSP");// 获得ID为first标签的jQuery对象 
  11.         first.change(function(){ 
  12.             var num1 = first.val();// 取得first对象的值 
  13.             var num2 = second.val();// 取得second对象的值 
  14.             var sum = (num1-0)+(num2-0); 
  15.             sumSP.text(sum); 
  16.         }); 
  17.         second.change(function(){ 
  18.             var num1 = first.val(); 
  19.             var num2 = second.val(); 
  20.             var sum = (num2-0)+(num1-0); 
  21.             sumSP.text(sum); 
  22.         }); 
  23.     }); 
  24. </script> 
  25. </head> 
  26.  
  27. <body> 
  28.     <center> 
  29.     <formaction=""> 
  30.         第一个数：<inputtype="text"size="25"id="first"/><br/><br/> 
  31.         第二个数：<inputtype="text"size="25"id="second"/><br/><br/> 
  32.         它们的和：<spanid="sumSP"style="color:red"></span> 
  33.     </form> 
  34.     </center> 
  35. </body> 
  36. </html> 

其中num1-0的作用是把字符串num1变成数字，在JavaScript中把字符串"123456789"变成数字，最简单的办法就是"123456789"-0。

下面是考虑精度的代码。

view plaincopy to clipboardprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3. <head> 
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> 
  5. <scripttype="text/javascript"src="http://www.cnblogs.com/jQuery/jquery.js"></script> 
  6. <scripttype="text/javascript"> 
  7.     $(function(){ 
  8.         var first = $("#first");// 获得ID为first标签的jQuery对象 
  9.         var second = $("#second");// 获得ID为first标签的jQuery对象 
  10.         var sumSP = $("#sumSP");// 获得ID为first标签的jQuery对象 
  11.         first.change(function(){ 
  12.             var num1 = first.val();// 取得first对象的值 
  13.             var num2 = second.val();// 取得second对象的值 
  14.             var sum = add(num1,num2); 
  15.             sumSP.text(sum); 
  16.         }); 
  17.         second.change(function(){ 
  18.             var num1 = first.val(); 
  19.             var num2 = second.val(); 
  20.             var sum = add(num1,num2); 
  21.             sumSP.text(sum); 
  22.         }); 
  23.     }); 
  24.      
  25.     function add(arg1,arg2){ 
  26.         var a1,a2,m; 
  27.         try{ 
  28.             a1 = arg1.toString().split(".")[1].length 
  29.         }catch(e){ 
  30.             a1 = 0; 
  31.         } 
  32.         try{ 
  33.             a2 = arg2.toString().split(".")[1].length 
  34.         }catch(e){ 
  35.             a2 = 0; 
  36.         } 
  37.         m = Math.pow(10, Math.max(a1,a2)); 
  38.         return (arg1*m+arg2*m)/m; 
  39.     } 
  40. </script> 
  41. </head> 
  42.  
  43. <body> 
  44.     <center> 
  45.     <formaction=""> 
  46.         第一个数：<inputtype="text"size="25"id="first"/><br/><br/> 
  47.         第二个数：<inputtype="text"size="25"id="second"/><br/><br/> 
  48.         它们的和：<spanid="sumSP"style="color:red"></span> 
  49.     </form> 
  50.     </center> 
  51. </body> 
  52. </html> 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/suizhikuo/p/2283320.html