当前位置:主页 > 站长学院 > 网页设计 >

使用JS与HTML实现简易计算器

发布时间:  浏览: 次  作者: YouYou

使用JS完成简易计算器,供大家参考,具体内容如下:

要求:输入的值只能是数字,使用正则表达式

效果图:

使用JS与HTML实现简易计算器

onchange():值改变时执行事件

onblur():鼠标移出时执行事件。

代码实现:

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0"
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge"
  7.     <title>计算器</title> 
  8. </head> 
  9. <body> 
  10.     <div style="text-align: center;"
  11.         <input type="text" id="1" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " > 
  12.     <select name="select" id="select"
  13.         <option value="null">请选择</option> 
  14.         <option value="0">+</option> 
  15.         <option value="1">-</option> 
  16.         <option value="2">*</option> 
  17.         <option value="3">/</option> 
  18.     </select> 
  19.     <input type="text" id="2" onkeyup="this.value=this.value.replace(/[^\d]/g,'') "
  20.     = 
  21.     <input type="text" id="3" onkeyup="this.value=this.value.replace(/[^\d]/g,'') "><br><br> 
  22.     </div> 
  23.     <div style="text-align: center;"
  24.         <input type="button"  id="button"value="计算"
  25.     </div> 
  26.     <script> 
  27.          
  28.     function accAdd(arg1,arg2){  
  29.         var r1,r2,m;  
  30.         try{ 
  31.             r1=arg1.toString().split(".")[1].length 
  32.         }catch(e){ 
  33.             r1=0 
  34.         }  
  35.         try{ 
  36.             r2=arg2.toString().split(".")[1].length 
  37.         }catch(e){ 
  38.             r2=0 
  39.         }  
  40.         m=Math.pow(10,Math.max(r1,r2))  
  41.         return (arg1*m+arg2*m)/m  
  42.         }  
  43.         Number.prototype.add = function (arg){  
  44.         return accAdd(arg,this);  
  45.         } 
  46.  
  47.  
  48.     function Subtr(arg1,arg2){ 
  49.         var r1,r2,m,n; 
  50.   
  51.         try{ 
  52.             r1=arg1.toString().split(".")[1].length 
  53.         }catch(e){ 
  54.             r1=0 
  55.         } 
  56.   
  57.         try{ 
  58.             r2=arg2.toString().split(".")[1].length 
  59.         }catch(e){ 
  60.             r2=0 
  61.         } 
  62.         m=Math.pow(10,Math.max(r1,r2)); 
  63.   
  64.      // last modify by deeka 
  65.      // 动态控制精度长度 
  66.         n=(r1>=r2)?r1:r2; 
  67.         return ((arg1*m-arg2*m)/m).toFixed(n); 
  68.     } 
  69.     function accMul(arg1,arg2)  //乘法 
  70.     {  
  71.         var m=0,s1=arg1.toString(),s2=arg2.toString();  
  72.         try{ 
  73.             m+=s1.split(".")[1].length 
  74.         }catch(e){}  
  75.         try{ 
  76.             m+=s2.split(".")[1].length 
  77.         }catch(e){}  
  78.         return Number(s1.replace(".",""))*Number(s2.replace(".","")) / Math.pow(10,m)  
  79.         }  
  80.   
  81.     //给Number类型增加一个mul方法,调用起来更加方便。  
  82.     Number.prototype.mul = function (arg){  
  83.     return accMul(arg, this);  
  84.     }  
  85.  
  86.     function accDiv(arg1,arg2){  
  87.     var t1=0,t2=0,r1,r2;  
  88.     try{ 
  89.         t1=arg1.toString().split(".")[1].length 
  90.     }catch(e){}  
  91.     try{ 
  92.         t2=arg2.toString().split(".")[1].length 
  93.     }catch(e){}  
  94.      with(Math){  
  95.         r1=Number(arg1.toString().replace(".",""))  
  96.         r2=Number(arg2.toString().replace(".",""))  
  97.         return (r1/r2)*pow(10,t2-t1);  
  98.         }  
  99.     }  
  100.         Number.prototype.div = function (arg){  
  101.         return accDiv(this, arg);  
  102.     } 
  103.  
  104.  
  105.         document.getElementById('button').onclick=function(){ 
  106.             var num1 =document.getElementById('1').value; 
  107.             var num2 =document.getElementById('2').value; 
  108.             var num3; 
  109.             var op =document.getElementById('select').value; 
  110.             switch(op){ 
  111.                 case '0'
  112.                     num3= accAdd(num1,num2); 
  113.                     break
  114.                 case '1'
  115.                     num3= Subtr(num1,num2) ; 
  116.                     break
  117.                 case '2'
  118.                     num3=accMul(num1,num2) ; 
  119.                     break
  120.                 case '3'
  121.                     num3=accDiv(num1,num2) ; 
  122.                     break
  123.             } 
  124.             document.getElementById('3').value=num3; 
  125.         } 
  126.         
  127.     </script> 
  128.  
  129. </body> 
  130. </html> 

 

    模板定制 公司简介 支付方式 联系我们 售后服务
    领先的建站专家,为个人站长与中小企业提供动力!
    Copyright © 2012-2020 悠悠设计 版权所有
    苏ICP备15050911号
    【电脑版】