JavaScript实现的计算器(一种全新的继承方式,模拟多态,策略模式)

截图 :

 

 

 

cal.js

 

	var Class = {} ;
	Class.calculation = function(){
		var calculation = {} ;
		calculation.result = 0 ;
		calculation.calculate = function(num1,num2){} ;
		calculation.getResult = function(){
			return this.result ;
		} ;
		return calculation ;
	} ;
	Class.add = function(){
		var add = Class.calculation() ;
		add.calculate = function(num1,num2){
			this.result = num1 + num2 ;
		} ;
		return add ;
	}
	Class.subtraction = function(){
		var subtraction = Class.calculation() ;
		subtraction.calculate = function(num1,num2){
			this.result = num1 - num2 ;
		} ;
		return subtraction ;
	}
	Class.multiply = function(){
		var multiply = Class.calculation() ;
		multiply.calculate = function(num1,num2){
			this.result = num1 * num2 ;
		} ;
		return multiply ;
	}
	Class.divide = function(){
		var divide = Class.calculation() ;
		divide.calculate = function(num1,num2){
			this.result = num1 / num2 ;
		} ;
		return divide ;
	}
	Class.calculator = function(num1,num2,op){
		var obj = null ;
		var num1 = parseInt(num1) || 0 ;
		var num2 = parseInt(num2) || 0 ;
		if("+" == op){
			obj = Class.add() ;
		}
		else if("-" == op){
			obj = Class.subtraction() ;
		}
		else if("*" == op){
			obj = Class.multiply() ;
		}
		else if("/" == op){
			if(0 == num2){
				alert("除数不能为零!") ;
				return ;
			}
			obj = Class.divide() ;
		}
		else{
			alert("无效的" + op + "操作符!") ;
			return ;
		}
		obj.calculate(num1,num2) ;
		alert("计算结果:" + obj.getResult()) ;
	}

 

 

测试 :

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>JavaScript面向对象</TITLE>
	<script type="text/javascript" src="js-lib/cal.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			document.getElementById("command").onclick = function(){
				var n1 = document.getElementById("n1").value ;
				var opera = document.getElementById("opera").value ;
				var n2 = document.getElementById("n2").value ;
				Class.calculator(n1,n2,opera) ;
			}
	} ;
</script>
 </HEAD>

 <BODY>

	操作数1 : <input type="text" id="n1" /></br></br>
	操作符号 : <input size="4" type="text" id="opera" /></br></br>
	操作数2 : <input type="text" id="n2" /></br></br>
	<input type="button"  id="command" value="计算" />
</BODY>
</HTML>
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值