本文实例为大家分享了javascript模拟实现计算器的具体代码,供大家参考,具体内容如下
功能:
1、实现单击按钮录入数字
2、实现基础四则运算功能,并添加必要的异常处理。
3、实现小数点功能并添加异常处理:小数点只能出现一次
4、实现正负号功能
5、实现退位功能,已经是最后一位时,显示框显示为0
6、AC清屏功能
使用的知识点:
1、利用大量的自定义函数实现业务逻辑
2、灵活运用事件及事件处理
3、培养异常处理的编程方法
4、培养并实践利用不同思路实现编程
综合练习的目的:
1、将css,html和js有效的进行技术组合,实现业务功能
2、锻炼和培养编程思想,解决问题的能力和方法
3、锻炼和培养利用多种编程思路,完成预先设定的目标
而且最近刚上手js,感觉特别有趣,学习java基础的时候没有那么大的兴趣。感觉刚一上手js感觉特别好玩有趣,在这里把一个简单的计算器源码展示出来:
html页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html> < html > < head > < title >js计算器</ title > < link rel = "stylesheet" type = "text/css" href = "index.css" > < script type = "text/javascript" src = "index.js" > </ script > </ head > < body onload = "init()" > <!-- 1个文本框10个数字....20个按钮 --> < div id = "div1" > < form action = "" > < div id = "div2" > < input type = "text" name = "num" disabled = "disabled" id = "num" value = "0" > </ div > </ form > < div id = "div3" > < input type = "button" name = "" value = "C" id = "baidu" > < input type = "button" name = "" value = "←" id = "" > < input type = "button" name = "" value = "+/-" id = "" > < input type = "button" name = "" value = "/" id = "" > < input type = "button" name = "" value = "7" id = "" > < input type = "button" name = "" value = "8" id = "" > < input type = "button" name = "" value = "9" id = "" > < input type = "button" name = "" value = "*" id = "" > < input type = "button" name = "" value = "4" id = "" > < input type = "button" name = "" value = "5" id = "" > < input type = "button" name = "" value = "6" id = "" > < input type = "button" name = "" value = "-" id = "" > < input type = "button" name = "" value = "1" id = "" > < input type = "button" name = "" value = "2" id = "" > < input type = "button" name = "" value = "3" id = "" > < input type = "button" name = "" value = "+" id = "" > < input type = "button" name = "" value = "0" id = "" > < input type = "button" name = "" value = "=" id = "" > < input type = "button" name = "" value = "." id = "" > < input type = "button" name = "" value = "AC" id = "" > </ div > </ div > </ body > </ html > |
js页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
function init(){ var num=document.getElementById( "num" ); num.value=0; var btn_num1; var fh; num.disabled= "disabled" ; // var n1=document.getElementById("n1"); // n1.οnclick=function(){ // } var oButton=document.getElementsByTagName( "input" ); for ( var i=0;i<oButton.length;i++){ oButton[i].onclick= function (){ if (isnumber( this .value)){ //num.value=(num.value+this.value)*1;//把默认0消除 if (isNull(num.value)){ num.value= this .value; } else { num.value=num.value+ this .value; } } else { //测试功能是否正确 // alert("bushishuzi") var btn_num= this .value; //测试功能是否正确(弹窗) // alert(btn_num); switch (btn_num){ case "+" : // alert(11); btn_num1=num.value*1; //=parseInt(num.value)这个也可以,后面的话需要改为number num.value=0; fh= "+" ; break ; case "-" : btn_num1=num.value*1; num.value=0; fh= "-" ; break ; case "*" : btn_num1=num.value*1; num.value=0; fh= "*" ; break ; case "/" : btn_num1=num.value*1; num.value=0; fh= "/" ; break ; case "." : num.value=dec_number(num.value); break ; case "←" : num.value=back(num.value); break ; case "+/-" : num.value=sign(num.value); break ; case "AC" : num.value= "0" ; break ; case "C" : init_baidu(); break ; case "=" : switch (fh){ case "+" : num.value=btn_num1+num.value*1; break ; case "-" : num.value=btn_num1-num.value*1; break ; case "*" : num.value=btn_num1*num.value*1; break ; case "/" : if (num.value==0){ num.value=0; alert( "除数不能为0" ); } else { num.value=btn_num1/num.value*1; } break ; } break ; } } } } } //小数点的功能 function dec_number(n){ if (n.indexOf( "." )==-1){ n=n+ "." ; } return n; } //验证文本框是否为空或者为0 function isNull(n){ if (n*1==0||n.length==0){ return true ; } else { return false ; } } //退位键 function back(n){ n=n.substr(0,n.length-1); if (isNull(n)){ n= "0" ; } return n; } //正负号+/- function sign(n){ if (n.indexOf( "-" )==-1){ n= "-" +n; } else { n=n.substr(1,n.length); } return n; } //isNaN:不能转换成数字:true,可以转换成数字是false function isnumber(n){ return !isNaN(n); } //C按钮使用一个超级链接,链接到百度,这个可以随便发挥 function init_baidu(){ window.location.href= "http://www.baidu.com" ; } |
css页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
*{ margin : 0px ; padding : 0px ; } div{ width : 170px ; } #div 1 { top : 60px ; left : 100px ; position : absolute ; } input[type= "button" ]{ width : 30px ; margin-right : 5px ; } input[type= "text" ]{ width : 147px ; text-align : right ; background-color : white ; border : 1px solid ; padding-right : 1px ; box-sizing:content-box; } input[type= "button" ]:hover{ /*//伪类和按钮的使用*/ background-color : white ; border : 1px solid ; } |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/qq_37215985/article/details/115425902