介绍Emmet是一个插件，在IDE中安装该插件后即可使用该功能。 HTML代码写起来虽简单，但是重复代码很多，Emmet能够存在一种HTML代码简写法(比较类似CSS的选择器写法)，比如div.c1>
使用HTML+CSS jQuery编写的简易计算器
2021-10-21 13:48:08
268
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;">0</div>
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欢迎提出，谢谢！
相关文章
-
14
2022-09
-
14
2022-09
-
14
2022-09
-
13
2022-09
-
13
2022-09
-
13
2022-09
推荐阅读
随机推荐
- 使用VH和VW实现真正的流体排版
- 教你用手实现聚光灯效果
- 关于normalize.css
- CSS简介和常规标签及属性
- 全面面试每日3 1 3354个工作日867
- 使用CSS实现简单的幻灯片放映效果
- CSS如何给文本添加下划线样式？
- CSS空白属性
- CSS技术之一-可变宽度溢出文本自适应滚动
- CSS、XTHML写规范和常见问题解答摘要
- CSS背景渐变支持transition过渡效果 - sjpqy
- css实现斜角效果
- HTML期末专题~单件大学生HTML页面制作10页(HTML CSS JavaScript)
- 标签dl dt dd在DIV CSS中的常用用法
- 前端知识框架1-css的讲解
- 用HTML和CSS实现点击内容显示再点击隐藏
- 注释 、CSS/JS //注释 和 /*.....*/ 注释">HTML 注释 、CSS/JS //注释 和 /*.....*/ 注释
- CSS-下拉导航条
- html怎么转换成pdf HTML & CSS 设计原则
- vue自定义指令两种方式,利用Vue自定义指令让你的开发变得更优雅