用JS寫的簡單的計算器實現(xiàn)代碼

2019-11-21 01:09:12

字體：大中小

供稿：網(wǎng)友

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();//寄存器 } //設(shè)置報錯信息 this.showmsg = function(msg){ if(this.debug == 1) alert(msg); } //設(shè)置運算符 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); } //設(shè)置顯示值 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; } //設(shè)置符號 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; } } //計算結(jié)果 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   class="iwvjtn8m0"   id="main"> <div> <span id="iwvjtn8m0"    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需刷新才能執(zhí)行]

上一篇：javascript 數(shù)組操作實用技巧

下一篇：prototype與jquery下Ajax實現(xiàn)的差別