我是靠谱客的博主 紧张月亮,这篇文章主要介绍如何用javascript实现计算器功能,现在分享给大家,希望可以做个参考。

本文操作环境:windows10系统、javascript 1.8.5、thinkpad t480电脑。

想必大家在学习编程语言的过程中都曾写过计算器功能,比如使用php、java、python等语言。那么你有没有使用过javascript实现过计算器功能呢?其实原理都是一样的,让我们一起来看看吧!

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; } #div1{ 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; }
登录后复制

推荐学习:javascript视频教程

以上就是如何用javascript实现计算器功能的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是紧张月亮最近收集整理的关于如何用javascript实现计算器功能的全部内容,更多相关如何用javascript实现计算器功能内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(141)

评论列表共有 0 条评论

立即
投稿
返回
顶部