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>
HTML实现简单计算器
时间： 2024-12-24 01:49:31