zoukankan      html  css  js  c++  java

  • 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> 
  • 相关阅读:
    【BZOJ2806】【CTSC2012】—熟悉的文章（二分答案+广义后缀自动机+单调队列优化dp）
    2017-2-15
    2017-2-14
    2017-2-13
    CSS居中
    2017-2-10
    微信小程序
    2017-2-9
    2017-2-8
    基础知识再整理： 01
  • 原文地址：https://www.cnblogs.com/suizhikuo/p/2283320.html
Copyright © 2011-2022 走看看