HTML+CSS,jQueryで作成した簡易計算機
65630 ワード
1 @ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 DOCTYPE html>
4 <html>
5 <head>
6 <meta charset=" utf-8">
7 <meta name="author" content="http://www.softwhy.com/" />
8 <title> title>
9 <jsp:include page="inc/easyui.jsp">jsp:include>
10 <style type="text/css">
11 button {
12 font-size: 18px;
13 font-weight: bold;
14 width: 75px;
15 }
16 style>
17 <script type="text/javascript">
18 var yunSuan = 0;// ，0- ;1- ;2- ;3- ;4-
19 var change = 0;//
20 var num1 = 0;//
21 var num2 = 0;//
22 var cunChuValue = 0;//
23 $(function() {
24 $(".number").click(function() {//
25 var num = $(this).attr('name');
26 var oldValue = $("#jieguo").html();
27 if (change == 1) {
28 oldValue = "0";
29 change = 0;
30 }
31 var newValue = "";
32 if (num == -1) {
33 oldValue = parseFloat(oldValue);
34 newValue = oldValue * -1;
35 } else if (num == ".") {
36 if (oldValue.indexOf('.') == -1)
37 newValue = oldValue + ".";
38 else
39 newValue = oldValue;
40 } else {
41 if (oldValue == 0 && oldValue.indexOf('.') == -1) {
42 newValue = num;
43 } else {
44 newValue = oldValue + num;
45 }
46 }
47 $("#jieguo").html(newValue);
48 });
49 $("#qingPing").click(function() {//
50 $("#jieguo").html("0");
51 yunSuan = 0;
52 change = 0;
53 num1 = 0;
54 num2 = 0;
55 });
56 $("#tuiGe").click(function() {//
57 if (change == 1) {
58 yunSuan = 0;
59 change = 0;
60 }
61 var value = $("#jieguo").html();
62 if (value.length == 1) {
63 $("#jieguo").html("0");
64 } else {
65 value = value.substr(0, value.length - 1);
66 $("#jieguo").html(value);
67 }
68 });
69 $(".yunSuan").click(function() {//
70 change = 1;
71 yuSuan = $(this).attr('name');
72 var value = $("#jieguo").html();
73 var dianIndex = value.indexOf(".");
74 if (dianIndex == value.length) {
75 value = value.substr(0, value.length - 1);
76 }
77 num1 = parseFloat(value);
78 });
79 $("#dengYu").click(function() {//
80 var value = $("#jieguo").html();
81 var dianIndex = value.indexOf(".");
82 if (dianIndex == value.length) {
83 value = value.substr(0, value.length - 1);
84 }
85 num2 = parseFloat(value);
86 var sum = 0;
87 if (yuSuan == 1) {
88 sum = num1 + num2;
89 } else if (yuSuan == 2) {
90 sum = num1 - num2;
91 } else if (yuSuan == 3) {
92 sum = num1 * num2;
93 } else if (yuSuan == 4) {
94 sum = num1 / num2;
95 } else if (yuSuan == 0 || num1 == 0 || num2 == 0) {
96 sum = num1 + num2;
97 }
98 var re = /^[0-9]+.?[0-9]*$/;
99 if (re.test(sum)) {
100 sum = sum.toFixed(2);
101 }
102 $("#jieguo").html(sum);
103 change = 1;
104 yuSuan = 0;
105 num1 = 0;
106 num2 = 0;
107 });
108 $("#cunChu").click(function() {//
109 change = 1;
110 var value = $("#jieguo").html();
111 var dianIndex = value.indexOf(".");
112 if (dianIndex == value.length) {
113 value = value.substr(0, value.length - 1);
114 }
115 cunChuValue = parseFloat(value);
116 });
117 $("#quCun").click(function() {//
118 change = 1;
119 $("#jieguo").html(cunChuValue);
120 });
121 $("#qingCun").click(function() {//
122 change = 1;
123 cunChuValue = 0;
124 });
125 $("#leiCun").click(function() {//
126 change = 1;
127 var value = $("#jieguo").html();
128 var dianIndex = value.indexOf(".");
129 if (dianIndex == value.length) {
130 value = value.substr(0, value.length - 1);
131 }
132 cunChuValue += parseFloat(value);
133 });
134 $("#jiCun").click(function() {//
135 change = 1;
136 var value = $("#jieguo").html();
137 var dianIndex = value.indexOf(".");
138 if (dianIndex == value.length) {
139 value = value.substr(0, value.length - 1);
140 }
141 if (cunChuValue == 0) {
142 cunChuValue = parseFloat(value);
143 } else {
144 cunChuValue = cunChuValue * parseFloat(value);
145 }
146 });
147 });
148 script>
149 head>
150 <body>
151 <table>
152 <tr>
153 <td colspan="4">
154 <div id="jieguo"
155 style="width: 300px;height: 30px;font-size: 30px;text-align: right;font-weight:bold;color: red;">0div>
156 td>
157 tr>
158 <tr style="height: 40px;">
159 <td>
160 <button id="cunChu"> button>
161 td>
162 <td>
163 <button id="quCun"> button>
164 td>
165 <td>
166 <button id="tuiGe"> button>
167 td>
168 <td>
169 <button id="qingPing"> button>
170 td>
171 tr>
172 <tr style="height: 40px;">
173 <td>
174 <button id="leiCun"> button>
175 td>
176 <td>
177 <button id="jiCun"> button>
178 td>
179 <td>
180 <button id="qingCun"> button>
181 td>
182 <td>
183 <button id="Chuyi" class="yunSuan" name="4"> ÷ button>
184 td>
185 tr>
186 <tr style="height: 40px;">
187 <td>
188 <button id="seven" class="number" name="7"> 7 button>
189 td>
190 <td>
191 <button id="eight" class="number" name="8"> 8 button>
192 td>
193 <td>
194 <button id="nine" class="number" name="9"> 9 button>
195 td>
196 <td>
197 <button id="chengYi" class="yunSuan" name="3"> × button>
198 td>
199 tr>
200 <tr style="height: 40px;">
201 <td>
202 <button id="four" class="number" name="4"> 4 button>
203 td>
204 <td>
205 <button id="five" class="number" name="5"> 5 button>
206 td>
207 <td>
208 <button id="six" class="number" name="6"> 6 button>
209 td>
210 <td>
211 <button id="jianQu" class="yunSuan" name="2"> - button>
212 td>
213 tr>
214 <tr style="height: 40px;">
215 <td>
216 <button id="one" class="number" name="1"> 1 button>
217 td>
218 <td>
219 <button id="two" class="number" name="2"> 2 button>
220 td>
221 <td>
222 <button id="three" class="number" name="3"> 3 button>
223 td>
224 <td>
225 <button id="jiaShang" class="yunSuan" name="1"> + button>
226 td>
227 tr>
228 <tr style="height: 40px;">
229 <td>
230 <button id="zero" class="number" name="0"> 0 button>
231 td>
232 <td>
233 <button id="dian" class="number" name="."> . button>
234 td>
235 <td>
236 <button id="zhengFu" class="number" name="-1"> +/- button>
237 td>
238 <td>
239 <button id="dengYu"> = button>
240 td>
241 tr>
242 table>
243 body>
244 html>計算機のスタイルのレイアウトは参考になり、コードはすべてオリジナルで、許可を得ずに転載を禁止している.内容は厳格なテストを経ていないで、もしBUGが提出することを歓迎するならば、ありがとうございます!
転載先:https://www.cnblogs.com/JoeyYan/p/5056640.html