本文實(shí)例為大家分享了javascript模擬實(shí)現(xiàn)計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
功能:
1、實(shí)現(xiàn)單擊按鈕錄入數(shù)字
2、實(shí)現(xiàn)基礎(chǔ)四則運(yùn)算功能，并添加必要的異常處理。
3、實(shí)現(xiàn)小數(shù)點(diǎn)功能并添加異常處理：小數(shù)點(diǎn)只能出現(xiàn)一次
4、實(shí)現(xiàn)正負(fù)號(hào)功能
5、實(shí)現(xiàn)退位功能，已經(jīng)是最后一位時(shí)，顯示框顯示為0
6、AC清屏功能
使用的知識(shí)點(diǎn):
1、利用大量的自定義函數(shù)實(shí)現(xiàn)業(yè)務(wù)邏輯
2、靈活運(yùn)用事件及事件處理
3、培養(yǎng)異常處理的編程方法
4、培養(yǎng)并實(shí)踐利用不同思路實(shí)現(xiàn)編程
綜合練習(xí)的目的:
1、將css,html和js有效的進(jìn)行技術(shù)組合，實(shí)現(xiàn)業(yè)務(wù)功能
2、鍛煉和培養(yǎng)編程思想，解決問(wèn)題的能力和方法
3、鍛煉和培養(yǎng)利用多種編程思路，完成預(yù)先設(shè)定的目標(biāo)
而且最近剛上手js，感覺(jué)特別有趣，學(xué)習(xí)java基礎(chǔ)的時(shí)候沒(méi)有那么大的興趣。感覺(jué)剛一上手js感覺(jué)特別好玩有趣，在這里把一個(gè)簡(jiǎn)單的計(jì)算器源碼展示出來(lái)：
html頁(yè)面：
|
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計(jì)算器</title><link rel="stylesheet" type="text/css"href="index.css" ><script type="text/javascript" src="index.js"></script></head><body onload="init()"> <!-- 1個(gè)文本框10個(gè)數(shù)字....20個(gè)按鈕 --><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頁(yè)面：
|
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;//把默認(rèn)0消除 if(isNull(num.value)){ num.value=this.value; }else{ num.value=num.value+this.value; } }else{ //測(cè)試功能是否正確 // alert("bushishuzi") var btn_num=this.value; //測(cè)試功能是否正確（彈窗） // alert(btn_num); switch(btn_num){ case "+": // alert(11); btn_num1=num.value*1;//=parseInt(num.value)這個(gè)也可以,后面的話需要改為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("除數(shù)不能為0"); }else{ num.value=btn_num1/num.value*1; } break; } break; } } } }}//小數(shù)點(diǎn)的功能function dec_number(n){ if(n.indexOf(".")==-1){ n=n+"."; } return n;}//驗(yàn)證文本框是否為空或者為0function 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;}//正負(fù)號(hào)+/-function sign(n){ if(n.indexOf("-")==-1){ n="-"+n; }else{ n=n.substr(1,n.length); } return n;}//isNaN:不能轉(zhuǎn)換成數(shù)字：true,可以轉(zhuǎn)換成數(shù)字是falsefunction isnumber(n){ return !isNaN(n); } //C按鈕使用一個(gè)超級(jí)鏈接，鏈接到百度，這個(gè)可以隨便發(fā)揮function init_baidu(){ window.location.href="http://www.baidu.com";} |
css頁(yè)面：
|
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{/*//偽類(lèi)和按鈕的使用*/ background-color:white; border:1px solid;} |
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/qq_37215985/article/details/115425902
