HTML实现简单计算器

浏览数：17 / 时间：2015年06月09日

  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; width: 270px">
 44             <tr>
 45                 <td colspan="4">
 46                     <input type="text" id="nummessege"
 47                         style="height: 90px; width: 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; width: 90px; font-size: 35px">
 54                 </td>
 55 
 56                 <td>
 57                     <input type="button" value="2" id="2" onclick="onclicknum(2)"
 58                         style="height: 70px; width: 90px; font-size: 35px">
 59                 </td>
 60 
 61                 <td>
 62                     <input type="button" value="3" id="3" onclick="onclicknum(3)"
 63                         style="height: 70px; width: 90px; font-size: 35px">
 64                 </td>
 65 
 66                 <td>
 67                     <input type="button" value="+" id="add" onclick="onclicknum(‘+‘)"
 68                         style="height: 70px; width: 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; width: 90px; font-size: 35px">
 76                 </td>
 77 
 78                 <td>
 79                     <input type="button" value="5" id="5" onclick="onclicknum(5)"
 80                         style="height: 70px; width: 90px; font-size: 35px">
 81                 </td>
 82 
 83                 <td>
 84                     <input type="button" value="6" id="6" onclick="onclicknum(6)"
 85                         style="height: 70px; width: 90px; font-size: 35px">
 86                 </td>
 87 
 88                 <td>
 89                     <input type="button" value="-" id="sub" onclick="onclicknum(‘-‘)"
 90                         style="height: 70px; width: 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; width: 90px; font-size: 35px">
 98                 </td>
 99 
100                 <td>
101                     <input type="button" value="8" id="8" onclick="onclicknum(8)"
102                         style="height: 70px; width: 90px; font-size: 35px">
103                 </td>
104 
105                 <td>
106                     <input type="button" value="9" id="9" onclick="onclicknum(9)"
107                         style="height: 70px; width: 90px; font-size: 35px">
108                 </td>
109 
110                 <td>
111                     <input type="button" value="*" id="mul" onclick="onclicknum(‘*‘)"
112                         style="height: 70px; width: 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; width: 190px; font-size: 35px">
120                 </td>
121                 <td>
122                     <input type="button" value="." id="point" onclick="onclicknum(‘.‘)"
123                         style="height: 70px; width: 90px; font-size: 35px">
124                 </td>
125 
126                 <td>
127                     <input type="button" value="/" id="division"
128                         onclick="onclicknum(‘/‘)"
129                         style="height: 70px; width: 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; width: 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; width: 190px; font-size: 35px" />
145                 </td>
146 
147 
148             </tr>
149 
150 
151         </table>
152 
153     </body>
154 </html>