1 <!DOCTYPE html> 2 <html> 3 <meta name="content-type" content="text/html; charset=UTF-8"> 4 <head> 5 <title>Calculator</title> 6 7 <!--将按键内容以字符串形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中--> 8 9 <script type="text/javascript"> 10 var numresult; 11 var str; 12 13 function onclicknum(nums) { 14 15 str = document.getElementById("nummessege"); 16 str.value = str.value + nums; 17 18 } 19 20 function onclickclear() { 21 22 str = document.getElementById("nummessege"); 23 str.value = ""; 24 25 } 26 27 function onclickresult() { 28 29 str = document.getElementById("nummessege"); 30 numresult = eval(str.value); 31 str.value = numresult; 32 33 } 34 </script> 35 36 </head> 37 38 <body bgcolor="affff" > 39 40 <!--定义按键表格,每个按键对应一个事件触发--> 41 42 <table border="1" align="center" bgColor="#bbff77" 43 style="height: 350px; 270px"> 44 <tr> 45 <td colspan="4"> 46 <input type="text" id="nummessege" 47 style="height: 90px; 350px; font-size: 50px" /> 48 </td> 49 </tr> 50 <tr> 51 <td> 52 <input type="button" value="1" id="1" onclick="onclicknum(1)" 53 style="height: 70px; 90px; font-size: 35px"> 54 </td> 55 56 <td> 57 <input type="button" value="2" id="2" onclick="onclicknum(2)" 58 style="height: 70px; 90px; font-size: 35px"> 59 </td> 60 61 <td> 62 <input type="button" value="3" id="3" onclick="onclicknum(3)" 63 style="height: 70px; 90px; font-size: 35px"> 64 </td> 65 66 <td> 67 <input type="button" value="+" id="add" onclick="onclicknum('+')" 68 style="height: 70px; 90px; font-size: 35px"> 69 </td> 70 </tr> 71 72 <tr> 73 <td> 74 <input type="button" value="4" id="4" onclick="onclicknum(4)" 75 style="height: 70px; 90px; font-size: 35px"> 76 </td> 77 78 <td> 79 <input type="button" value="5" id="5" onclick="onclicknum(5)" 80 style="height: 70px; 90px; font-size: 35px"> 81 </td> 82 83 <td> 84 <input type="button" value="6" id="6" onclick="onclicknum(6)" 85 style="height: 70px; 90px; font-size: 35px"> 86 </td> 87 88 <td> 89 <input type="button" value="-" id="sub" onclick="onclicknum('-')" 90 style="height: 70px; 90px; font-size: 35px"> 91 </td> 92 </tr> 93 94 <tr> 95 <td> 96 <input type="button" value="7" id="7" onclick="onclicknum(7)" 97 style="height: 70px; 90px; font-size: 35px"> 98 </td> 99 100 <td> 101 <input type="button" value="8" id="8" onclick="onclicknum(8)" 102 style="height: 70px; 90px; font-size: 35px"> 103 </td> 104 105 <td> 106 <input type="button" value="9" id="9" onclick="onclicknum(9)" 107 style="height: 70px; 90px; font-size: 35px"> 108 </td> 109 110 <td> 111 <input type="button" value="*" id="mul" onclick="onclicknum('*')" 112 style="height: 70px; 90px; font-size: 35px"> 113 </td> 114 </tr> 115 116 <tr> 117 <td colspan="2"> 118 <input type="button" value="0" id="0" onclick="onclicknum(0)" 119 style="height: 70px; 190px; font-size: 35px"> 120 </td> 121 <td> 122 <input type="button" value="." id="point" onclick="onclicknum('.')" 123 style="height: 70px; 90px; font-size: 35px"> 124 </td> 125 126 <td> 127 <input type="button" value="/" id="division" 128 onclick="onclicknum('/')" 129 style="height: 70px; 90px; font-size: 35px"> 130 </td> 131 </tr> 132 133 <tr> 134 135 <td colspan="2"> 136 <input type="button" value="Del" id="clear" 137 onclick="onclickclear()" 138 style="height: 70px; 190px; font-size: 35px" /> 139 </td> 140 141 <td colspan="2"> 142 <input type="button" value="=" id="result" 143 onclick="onclickresult()" 144 style="height: 70px; 190px; font-size: 35px" /> 145 </td> 146 147 148 </tr> 149 150 151 </table> 152 153 </body> 154 </html>
