在线计算器源码（HTML+CSS+jQuery ）
⼀、简介
最近学习前端内容，做为练习，试开发了⼀个在线的计算器。
具有如下功能：
1.
1. +-*/运算；
2. 开平⽅根运算；
3. ⽀持键盘输⼊（delete键设置为初始化功能）。
⽬前存在的BUG ：
1. 输⼊⼩数时，初次输⼊⼩数点，其会显⽰在数字最左侧，经测试，应为input标签的问题；
2. 负数的输⼊；
3. 结果为负时，负号（即减号）显⽰在数字的右侧。
以上1和3两个BUG，均仅为显⽰问题，影响⽤户读数，不影响计算。因时间问题，BUG没有处理。仅描述⼀下解决BUG的思路：1、关于⼩数占负号显⽰。可将其以替换字符顺序的⽅式正确显⽰。2，负数的输⼊问题。strNum为初始值时，绕过运算开关，并将负号赋给strNum变量并退出函数。不操作运算符。
未完成的功能：
1. 百分⽐计算；
2. 记忆加减和清除；
3. ⼩数点后的保留位数设置和进位法则设置。
留待以后有时间了再写来玩。
⼆、源代码源代码都⽐较简单，就不做更多说明了。（我设想的展⽰顺序为HTML->CSS ->JS，CSDN给我的展⽰顺序是CSS->JS->HTML。因引⽤的是代码⽚，CSDN也还在学⽤，不知道怎么修改代码⽚⾥⽂件顺序。有知道的评论告诉⼀下。）
1
2
3
4
5
6
7
rel="stylesheet" type="text/css" href="css/calcStyle.css">8
<script src="js/jquery-1.9.1.min.js"></script>9
<script src="js/calcjs.js"></script>10
11
12
13
14
15
在线计算器16
17
23
24
25        MRC 26
27        M+
28
29        M-
30
31
32
33
34
35退格36
37        AC/ON 38
39
40
41
42
43        7
44
45        8
46
47        9
48
49        4
50
51        5
52
53        6
54
55        1
56
57        2
58
59        3
60
61        0
62
63        00
64
65        .
66
67
68
69
70
71        %
72
73        √￣74
75        ×
76
77        ÷
78
79        +
80
81        -
82
88
89
90
91/***** reset *****/
92html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textar
93    margin: 0;
94    padding: 0;
95}
96
97html, body, fieldset, img, iframe, abbr {
98    border: 0;
99}
100
101h1, h2, h3, h4, h5, h6, small {
102    font-size: 100%;
103}
104
105textarea {
106    overflow: auto;
107    resize: none;
108}
109
110a, button {
111    cursor: pointer;
112}
113
jquery在线库114h1, h2, h3, h4, h5, h6, em, strong, b {
115    font-weight: bold;
116}
117
118del, ins, u, s, a, a:hover {
119    text-decoration: none;
120}
121
122body,h1, h2, h3, h4, h5, h6, textarea, input, button, select, keygen, legend {
123    font: 20px/24px "Microsoft YaHei", \5b8b\4f53;
124    color: #1b1b1b;
125    outline: 0;
126}
127
128textarea, input, img {
129    border: none;
130}
131
132body {
133    background: #f2f2f2;
134}
135
136a, a:hover {
137    color: #525252;
138}
139
140body {
141    background-color:#eee;
142}
143
144/*calculator*/
145
146
147
149    margin:50px auto;
150    width:565px;
151    height:697px;
152    background-color:#fff;
153    border:3px solid #cd2323;
154    border-radius:10px;
155    -moz-border-radius: 10px;
156    -webkit-border-radius: 10px;
157}
158
159.calculator h3 {
160    margin:20px 0 0 20px;
161    font-size:20px;
162    font-weight:bold;
163}
164
165.view {
166    margin:40px 10px;
167    padding-right:10px;
168    width:535px;
169    font-size:40px;
170    line-height:55px;
171    direction:rtl;
172    box-shadow:0 0 3px 2px #dadada inset; 173}
174
175.button {
176    margin-top:40px;
177    margin-left:10px;
178    padding-top:5px;
179    padding-left:5px;
180    overflow:hidden;
181}
182
183.button button {
184    margin-bottom:10px;
185    margin-right:8px;
186    width:93px;
187    height:68px;
188    border:1px solid #fcaeaf;
189    border-radius:5px;
190    -moz-border-radius: 5px;
191    -webkit-border-radius: 5px;
192}
193
194.button button:hover {
195    box-shadow:0 0 1px 1px #ffff00;
196    border:1px solid #fff;
197}
198
<,.number {
200    width:330px;
201    float:left;
202}
203
204.number, .operator {
205    margin-top:15px;
206}
207
< button {
209    background:#bffab1;
210}
211
214    color:#fff;
215}
216
217.number button {
218    background-color:#BDD8EE;
219    font-size:35px;
220}
221
222.operator button {
223    background-color:#DEC8B8;
224    font-size:30px;
225}
226
227.button .add {
228    float:left;
229    margin-right:13px;
230    height:146px;
231}
232
233.button .equal {
234    background:#8B743F;
235    color:#fff;
236}
237/**
238 * Created by KevinJing on 2015/7/5.
239 */
240
241$(document).ready(function(){
242    funInitializer();                          //初始化值。
243
244
245    $('.number button').click(function(){      //点击数字，获取数字字符串。246      var str1='';
247        str1=$(this).text();
248        funStrNum(str1);
249
250    });
251
252    $('.operator button').click(function(){        //点击运算符。
253        var operator=$(this).attr('id');
254        funOperator(operator);
255    });
256
257    $('#AC').click(function(){                      //初始化事件。
258        funInitializer();
259    });
260
261    $('#backSpace').click(function(){              //退格事件。
262        funBackSpace();
263    });
264
265    $(window).keypress(function(event){            //处理键盘输⼊字符
266        var str1='';
267        var eve=event.keyCode;
268        str1=String.fromCharCode(eve);
269        if(str1.match(/[0-9\.]+/)){                  //输⼊数字调⽤数字字符串函数。270            funStrNum(str1);
271        }else if(str1.match(/[\+\-\*\/]+/) || event.keyCode==13){
272            //输⼊运算符，调⽤运算函数，并传递运算符参数。
273            var operator='';
274            switch(str1){
275                case '+':
276                    operator='add';
277                    break;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。