用JS写的简单的计算器实现代码


答案：  
1.本页效果图片 
 
   2.美化后的效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<script> 
Array.prototype.remove=function(index) 
{ 
if(isNaN(index)||index>this.length){return false;} 
for(var i=0,n=0;i<this.length;i++) 
{ 
if(this[i]!=this[index]) 
{ 
this[n++]=this[i] 
} 
} 
this.length-=1 
} 

function commonMath(){ 
//类初始化 
this.init = function(){ 
this.tmp = ''; 
this.debug = 0; 
this.output = ''; 
this.method = ''; 
this.sign = 1;//0:-;1:+ 
this.register = Array();//寄存器 
} 
//设置报错信息 
this.showmsg = function(msg){ 
if(this.debug == 1) alert(msg); 
} 
//设置运算符 
this.setMethod = function(_method){ 
this.method = _method; 
_length = this.register.length; 
if(_length == 0){ 
if(this.tmp == '') return; 
this.register[0] = this.tmp; 
this.register[1] = _method; 
this.tmp = ''; 
return; 
} 
if(_length = 2 || this.tmp == ''){ 
this.register[1] = _method; 
} 
if(_length == 2 && this.tmp != ''){ 
this.register[2] = this.tmp; 
this.run(1); 
} 
if(_length == 3) this.run(1); 
} 
//设置显示值 
this.setValue = function(_value){ 
var tmp = parseInt(eval(this.tmp+'+"'+_value+'"')); 
max = /^-?\d{1,9}$/i; 
if( max.test(tmp) == false){ 
return; 
} 
this.tmp = tmp; 
this.output.value = this.tmp; 
} 
//设置符号 
this.setSign = function(){ 
var del = 0; 
var sign = Array('-','+'); 
this.sign = this.sign ^ 1; 
_sign = sign[this.sign]; 
if(/\d/i.test(this.tmp)== false && this.register.length > 0){ 
del = 1; 
this.tmp = this.register[0]; 
} 
if(_sign == '-'){ 
this.tmp = -this.tmp; 
}else{ 
this.tmp = Math.abs(this.tmp); 
} 
this.output.value = this.tmp; 
if(del == 1){ 
this.register[0] = this.tmp; 
this.tmp = ''; 
} 
} 
//获取按键 
this.getValue = function(input){ 
var _in = input; 
var inputList = document.getElementsByTagName("input"); 
this.output = inputList[0]; 
regMethod = /^[\+|\-|\*|\/]$/i; 
if(regMethod.test(_in)){ 
this.setMethod(_in); 
return; 
} 
regNum = /^\d$/i; 
if(regNum.test(_in)){ 
this.setValue(_in); 
return; 
} 
regSign = /^\+\/\-$/i; 
if(regSign.test(_in)){ 
this.setSign(_in); 
return; 
} 
regResult = /^=$/; 
if(regResult.test(_in)){ 
this.run(); 
return; 
} 
} 
//计算结果 
this.run = function(type){ 
if(this.register.length < 2) return this.showmsg(1); 
if(this.register.length == 2 && (this.tmp == '')) return this.showmsg(2); 
if(this.register.length == 2 && this.tmp != ''){ 
this.register[2] = this.tmp; 
this.run(); 
} 

this.showmsg(this.register.join(' ')); 
var _exp = parseInt(eval(this.register.join(' '))); 
this.output.value = _exp; 
for(i=0;i<3;i++){ 
this.register.remove(i); 
} 
this.register[0] = _exp; 
this.tmp = ''; 
if(type) this.register[1] = this.method; 
return; 
} 
} 
var commonMath = new commonMath(); 
commonMath.init(); 
</script> 
<style> 
#main{ 
width:100%; 
height:100%; 
} 
#inputs{ 
position:relative; 
top:50%; 
left:50%; 
} 
.inbutton{ 
width:30px; 
} 
.outbutton{ 
width:145px; 
text-align:right; 
} 
.tcenter{ 
text-align:center; 
} 
</style> 
</head> 
<body> 
<div id="main"> 
<div> 
<span class="outbutton tcenter">etongchina@gmail.com</span> 
</div> 
<div> 
<span><input id="output" type="text" class="outbutton" maxlength="9" value="." /></span> 
</div> 
<div> 
<span><input type="button" class="inbutton" value="7" onclick="commonMath.getValue(this.value)" /></span> 
<span><input type="button" class="inbutton" value="8" onclick="commonMath.getValue(this.value)" /></span> 
<span><input type="button" class="inbutton" value="9" onclick="commonMath.getValue(this.value)" /></span> 
<span><input type="button" class="inbutton" value="+" onclick="commonMath.getValue(this.value)" /></span> 
</div> 
<div> 
<span><input type="button" class="inbutton" value="4" onclick="commonMath.getValue(this.value);" /></span> 
<span><input type="button" class="inbutton" value="5" onclick="commonMath.getValue(this.value);" /></span> 
<span><input type="button" class="inbutton" value="6" onclick="commonMath.getValue(this.value);" /></span> 
<span><input type="button" class="inbutton" value="-" onclick="commonMath.getValue(this.value);" /></span> 
</div> 
<div> 
<span><input type="button" class="inbutton" value="1" onclick="commonMath.getValue(this.value);" /></span> 
<span><input type="button" class="inbutton" value="2" onclick="commonMath.getValue(this.value);" /></span> 
<span><input type="button" class="inbutton" value="3" onclick="commonMath.getValue(this.value);" /></span> 
<span><input type="button" class="inbutton" value="*" onclick="commonMath.getValue(this.value);" /></span> 
</div> 
<div> 
<span><input type="button" class="inbutton" value="0" onclick="commonMath.getValue(this.value);" /></span> 
<span><input type="button" class="inbutton" value="+/-" onclick="commonMath.getValue(this.value);" /></span> 
<span><input type="button" class="inbutton" value="." onclick="commonMath.getValue(this.value);" /></span> 
<span><input type="button" class="inbutton" value="/" onclick="commonMath.getValue(this.value);" /></span> 
</div> 
<div> 
<span><input type="button" class="outbutton tcenter" value="计算" onclick="commonMath.getValue('=');" /></span> 
</div> 
</div> 
</body> 
</html>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：关于javascript 回调函数中变量作用域的讨论
下一个：javascript类继承机制的原理分析
更多图片编程知识: