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


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

    分类: JavaScript 98人阅读 评论(0) 收藏 举报

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

    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。

    下面是考虑精度的代码。

    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> 
  • 相关阅读:
    面象对象设计原则之七:合成复用原则(Composition/Aggregate Reuse Principle, CARP)
    GRASP软件设计的模式和原则
    UniDAC 安装教程
    Delphi 实现检测线程类TThread是否结束
    DELPHI线程例子-FC
    Delphi Stringlist Delimiter如何区分TAB和空格
    DBGrid1
    UTF-8 delphi 函数
    未测试 Delphi读写UTF-8、Unicode格式文本文件
    mysql + unidac 使用事务例子
  • 原文地址:https://www.cnblogs.com/suizhikuo/p/2283320.html
Copyright © 2020-2023  润新知