1. This page effect picture
2. After beautifying the effect
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <ptml> <pead> <script> array.prototy Pe.remove=function (Index) {if (isNaN) | | 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} functi On Commonmath () {//class initialization this.init = function () {this.tmp = '; This.debug = 0; This.output = '; This.method = '; This.sign = 1;//0:-;1:+ This.register = Array ();//Register}//Set error message This.showmsg = function (msg) {if (This.debug = 1) al ERT (msg); }//Set operator 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); //Set display value 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; }//Set symbol 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 = '; }//Get key 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 The calculated result 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> </pead> <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" Valu E= "."/></span> </div> <div> <span><input type= "button" class= "Inbutton" value= "7" Oncli ck= "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> & Lt;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" 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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
