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

  
1.本页效果图片
 
   2.美化后的效果

<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> <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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]