A very small JavaScript Web calculator, the interface landscaping I think it is good, after all, in the absence of any picture modification of the case, very good-looking, and functional quite practical, you can complete the basic mathematical arithmetic, click "Run code" can be run to see the effect.
<ptml> <pead> <title> Calculator </title> <script> <!--willclear=false//This variable as the next input empty the input first Box status flag function Backspace () {//Backspace Calc.Input.value = Calc.Input.value.substring (0,calc.input.value.length-1) Calc.Input.title = Calc.Input.value.substring (0,calc.input.title.length-1)}//take the length of the original length minus one of the string, achieve the backspace effect. function Addoperator () {//Garco as if (willclear) {//If you need to empty the input box before this entry Willclear=false//Clear the flag first, avoid the next time again being incorrectly repeated empty clearinput ()//clear In addition to the input} Calc.Input.value + = Event.srcElement.innerText//To be used for display plus the operator just entered Calc.Input.title + = event.srcElement.name// In the evaluated expression area plus the operator you just entered} function Clearinput () {//Clear input calc.input.value= '//Clear display area calc.input.title= '//Empty expression} functi On result () {//the expression used to evaluate the result Calc.Input.value = eval (Calc.Input.title)//Executes the expression area, returning the results to the display area. willclear=true//set the Next button to clear the results of this calculation first. }//--> </script> <style> button {width:40; border:1 solid #808080; Background-color: #FFFFFF} </s tyle> </pead> <body> <form name= "CALC "> <table border=4 bordercolorlight=" #808080 "bordercolor=" #808080 "width=" "," height= "><TR> <TD width= "291 height=" bgcolor= "#C0C0C0" > <input type= "text" name= "INPUT" readonly size= ">&N" Bsp <button name= "Back" onclick= "backspace ()" >←</button> </td></tr><tr><td width= "291 "Height=" > <table border= "0" width= "100%" height= "" cellpadding= "0" > <tr> <td width= "25%" Heig ht= "align=" "Center" bgcolor= "#C0C0C0" > <button name= "1" onclick= "Addoperator ()" >1</BUTTON> </td > <td width= "25%" height= "align=" "Center" bgcolor= "#C0C0C0" > <button name= "2" onclick= "Addoperator ()" & gt;2</button> </td> <td width= "25%" height= "to" align= "center" bgcolor= "#C0C0C0" > <button name= "3 "Onclick=" Addoperator () ">3</BUTTON> </td> <td width=" 25% "height=" "align=" Center "bgcolor=" # C0C0C0 "> <button name=" + "onclick=" AddoPerator () ">+</BUTTON> </td> </tr> <tr> <td width=" 25% "height=" align= "center" Bgcolo R= "#C0C0C0" > <button name= "4" onclick= "Addoperator ()" >4</BUTTON> </td> <td width= "25%" height = "to" align= "center" bgcolor= "#C0C0C0" > <button name= "5" onclick= "Addoperator ()" >5</BUTTON> </td > <td width= "25%" height= "align=" "Center" bgcolor= "#C0C0C0" > <button name= "6" onclick= "Addoperator ()" & gt;6</button> </td> <td width= "25%" height= "align=" center "bgcolor=" #C0C0C0 "> <button name="- "Onclick=" Addoperator () ">-</BUTTON> </td> </tr> <tr> <td width=" 25% "height=" align= " "Center" bgcolor= "#C0C0C0" > <button name= "7" onclick= "Addoperator ()" >7</BUTTON> </td> <TD Width= "25%" height= "align=" center "bgcolor=" #C0C0C0 "> <button name=" 8 "onclick=" Addoperator () ">8</ button> </td> <td width= "25%" Height= "align=" "Center" bgcolor= "#C0C0C0" > <button name= "9" onclick= "Addoperator ()" >9</BUTTON> </td > <td width= "25%" height= "align=" "Center" bgcolor= "#C0C0C0" > <button name= "*" onclick= "Addoperator ()" & gt;x</button> </td> </tr> <tr> <td width= "25%" height= "to" align= "center" bgcolor= "#C0C0C0" > <button name= "Clear" onclick= "Clearinput ()" >C</BUTTON> </td> <td width= "25%" height= "Ali" gn= "center" bgcolor= "#C0C0C0" > <button name= "0" onclick= "addoperator ()" >0</BUTTON> </td> <TD Width= "25%" height= "align=" center "bgcolor=" #C0C0C0 "> <button name=" = "onclick=" result () ">=</button > </td> <td width= "25%" height= "align=" center "bgcolor=" #C0C0C0 "> <button name="/"onclick=" Addop Erator () ">÷</BUTTON> </td> </tr> </table> </TD></TR> </TABLE> </form > </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
