JavaScript实现计算器功能

截图 :

 

 

 

cal.js

 

Js代码  收藏代码
  1. var Class = {} ;  
  2. Class.calculation = function(){  
  3.     var calculation = {} ;  
  4.     calculation.result = 0 ;  
  5.     calculation.calculate = function(num1,num2){} ;  
  6.     calculation.getResult = function(){  
  7.         return this.result ;  
  8.     } ;  
  9.     return calculation ;  
  10. } ;  
  11. Class.add = function(){  
  12.     var add = Class.calculation() ;  
  13.     add.calculate = function(num1,num2){  
  14.         this.result = num1 + num2 ;  
  15.     } ;  
  16.     return add ;  
  17. }  
  18. Class.subtraction = function(){  
  19.     var subtraction = Class.calculation() ;  
  20.     subtraction.calculate = function(num1,num2){  
  21.         this.result = num1 - num2 ;  
  22.     } ;  
  23.     return subtraction ;  
  24. }  
  25. Class.multiply = function(){  
  26.     var multiply = Class.calculation() ;  
  27.     multiply.calculate = function(num1,num2){  
  28.         this.result = num1 * num2 ;  
  29.     } ;  
  30.     return multiply ;  
  31. }  
  32. Class.divide = function(){  
  33.     var divide = Class.calculation() ;  
  34.     divide.calculate = function(num1,num2){  
  35.         this.result = num1 / num2 ;  
  36.     } ;  
  37.     return divide ;  
  38. }  
  39. Class.calculator = function(num1,num2,op){  
  40.     var obj = null ;  
  41.     var num1 = parseInt(num1) || 0 ;  
  42.     var num2 = parseInt(num2) || 0 ;  
  43.     if("+" == op){  
  44.         obj = Class.add() ;  
  45.     }  
  46.     else if("-" == op){  
  47.         obj = Class.subtraction() ;  
  48.     }  
  49.     else if("*" == op){  
  50.         obj = Class.multiply() ;  
  51.     }  
  52.     else if("/" == op){  
  53.         if(0 == num2){  
  54.             alert("除数不能为零!") ;  
  55.             return ;  
  56.         }  
  57.         obj = Class.divide() ;  
  58.     }  
  59.     else{  
  60.         alert("无效的" + op + "操作符!") ;  
  61.         return ;  
  62.     }  
  63.     obj.calculate(num1,num2) ;  
  64.     alert("计算结果:" + obj.getResult()) ;  
  65. }  

  

测试 :

 

Html代码  收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE>JavaScript面向对象</TITLE>  
  5.     <script type="text/javascript" src="js-lib/cal.js"></script>  
  6.     <script type="text/javascript">  
  7.         window.onload = function(){  
  8.             document.getElementById("command").onclick = function(){  
  9.                 var n1 = document.getElementById("n1").value ;  
  10.                 var opera = document.getElementById("opera").value ;  
  11.                 var n2 = document.getElementById("n2").value ;  
  12.                 Class.calculator(n1,n2,opera) ;  
  13.             }  
  14.     } ;  
  15. </script>  
  16.  </HEAD>  
  17.   
  18.  <BODY>  
  19.   
  20.     操作数1 : <input type="text" id="n1" /></br></br>  
  21.     操作符号 : <input size="4" type="text" id="opera" /></br></br>  
  22.     操作数2 : <input type="text" id="n2" /></br></br>  
  23.     <input type="button"  id="command" value="计算" />  
  24. </BODY>  
  25. </HTML>  
posted @ 2014-08-05 08:40  技术狂  阅读(1253)  评论(0)  编辑  收藏  举报