計算器的主要作用是進行數字運算，開發一個計算器功能的web實例，有助于更好的掌握js基礎的數字運算能力。
本實例詳細分析一個js計算器的開發步驟，學習本教程時最好先具備一些基礎的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
|
<div class="calculator_wrap" id="calculator"><!--計算器外包元素--> <div class="show_num"><!--顯示數字區域--> <div class="num_save" id="numSave"></div><!--計算公式--> <div class="num_cur" id="numCur">0</div><!--計算結果--> <div class="show_m" id="showM">M</div><!--記憶存儲標志--> </div> <div class="btn_wrap" id="btnWrap"><!--按鈕區域--> <div class="btn" data-key="MC">MC</div><!--記憶清零--> <div class="btn" data-key="MR">MR</div><!--記憶讀取--> <div class="btn" data-key="MS">MS</div><!--存儲記憶--> <div class="btn" data-key="MA">M+</div><!--記憶加--> <div class="btn" data-key="ML">M-</div><!--記憶減--> <div class="btn" data-key="BACK">←</div><!--退格--> <div class="btn" data-key="CE">CE</div><!--清除當前--> <div class="btn" data-key="Clear">C</div><!--清除--> <div class="btn" data-key="Negate">±</div><!--正負轉換--> <div class="btn" data-key="Square">√￣</div><!--平方根--> <div class="btn" data-key="Num" data-value="7">7</div><!--7--> <div class="btn" data-key="Num" data-value="8">8</div><!--8--> <div class="btn" data-key="Num" data-value="9">9</div><!--9--> <div class="btn" data-key="Base" data-value="/">/</div><!--除--> <div class="btn" data-key="Percentage">%</div><!--百分號--> <div class="btn" data-key="Num" data-value="4">4</div><!--4--> <div class="btn" data-key="Num" data-value="5">5</div><!--5--> <div class="btn" data-key="Num" data-value="6">6</div><!--6--> <div class="btn" data-key="Base" data-value="*">*</div><!--乘--> <div class="btn" data-key="Reciprocal">1/x</div> <!--倒數--> <div class="btn" data-key="Num" data-value="1">1</div><!--1--> <div class="btn" data-key="Num" data-value="2">2</div><!--2--> <div class="btn" data-key="Num" data-value="3">3</div><!--3--> <div class="btn" data-key="Base" data-value="-">-</div><!--減--> <div class="btn equal" data-key="Equal">=</div><!--等于--> <div class="btn zero" data-key="Num" data-value="0">0</div><!--0--> <div class="btn" data-key="Point">.</div><!--小數點--> <div class="btn" data-key="Base" data-value="+">+</div><!--加--> </div></div> |
讀者可以自己編寫一些樣式，設計一個自己喜歡的計算器效果。本實例的計算器效果如下圖所示：
樣式代碼：
|
1
2
3
4
5
6
7
8
9
10
11
|
.calculator_wrap{width:240px;height:360px;padding:10px;margin:30px auto;border:1px solid #8acceb;background:#d1f1ff;} .calculator_wrap .show_num{position:relative;padding:0 8px;height:60px;background:#fff;text-align:right;} .calculator_wrap .show_m{position: absolute;left:10px;bottom:3px;display:none;} .calculator_wrap .num_save{height:26px;line-height:26px;font-size:12px;white-space:nowrap;} .calculator_wrap .num_cur{font-size:28px;height:34px;line-height:34px;} .calculator_wrap .btn_wrap{font-size:0px;} .calculator_wrap .btn{display:inline-block;width:38px;height:38px;line-height:38px;text-align:center;border:1px solid #ccc;background:#666;color:#fff;font-size:14px;margin:10px 10px 0 0;cursor:pointer;} .calculator_wrap .btn:hover{background:#333;} .calculator_wrap .btn:nth-child(5n){margin-right:0px;} .calculator_wrap .equal{position:absolute;height:90px;line-height:90px;} .calculator_wrap .zero{width:90px;} |
對于新手來說，計算器功能看起來好像很復雜，那么多按鈕、多種計算方式，不知如何開始。其實任何一個功能，只需要理清楚思路，一步一步編寫代碼，會發現實現起來都不難。
1 獲取各個html元素
web前端不論要在頁面上做什么，都要先獲取頁面上的各個DOM元素。看起來整個計算器的按鈕較多，實際開發中可以使用事件代理來操作按鈕，所以只獲取所有按鈕的容器元素即可。代碼如下：
|
1
2
3
4
5
6
7
8
9
10
|
//獲取外包元素var eCalculator = document.getElementById('calculator');//保存運算數據(公式)容器var eNumSave = document.getElementById('numSave');//當前數字容器var eNumCur = document.getElementById('numCur');//按鈕外部容器，用于事件代理var eBtnWrap = document.getElementById('btnWrap');//記憶存儲標志元素var eShowM = document.getElementById('showM'); |
2 聲明相關變量
在運算過程中，需要一些變量來進行輔助計算、存儲結果和判斷等，如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//運算公式var sStep = '';//當前數字var sCurValue = '0';//運算結果var nResult = null;//運算符var sMark = '';//MR記憶存儲數據var nMvalue = 0;//輸入狀態。false:輸入數字替換原數字;true:輸入數字加到原數字后面;var bLogStatus = false; |
3 按鍵上添加點擊事件
因為整個計算器按鍵較多，每一個按鈕都單獨綁定一個事件會顯得太多，很繁瑣，還會影響性能，且容易出錯。所以剛才只獲取了按鍵的外部容器 eCalculator。
再使用事件代理，就只需要在容器上添加點擊事件，判斷當前點擊的按鍵是哪一個，再執行對應的計算即可。用鼠標點擊按鍵的時候，可能會因為點得太快而選擇了按鍵上的文字，因此還需要在外包容器上添加一個阻止默認行為的操作，代碼如下所示：
|
1
2
3
4
5
6
7
8
9
10
|
//外包容器添加鼠標按下事件，用于防止選中文字eCalculator.addEventListener('mousedown',function(event){ //阻止鼠標按下時的默認行為，防止點擊按鈕過快時選中文字 event.preventDefault();});//按鍵容器添加點擊事件，用于代理所有按鍵的操作eBtnWrap.addEventListener('click',function(event){}); |
3.1 獲取點擊的按鍵和值
通過事件函數傳入的event參數，可以獲取到鼠標點擊的元素。再通過元素上的data-key和data-value屬性判斷鼠標點擊的是哪一個按鍵以及它的值，如下所示：
|
1
2
3
4
5
6
7
8
|
eBtnWrap.addEventListener('click',function(event){ //獲取點擊的元素 var eTarget = event.target; //判斷按下的鍵 var key = eTarget.dataset.key; //獲取按下的值 var value = eTarget.dataset.value;}); |
3.2 判斷按鍵及值，數字鍵和小數點執行輸入操作
如果按鍵屬性data-key是'Num'表示按下的是數字，'Point'表示小數點。
這些按鍵都是執行輸入，因為數字有多個，所以把數字輸入封裝到fnInputNum函數中。再封裝fnShowResult函數把數據顯示到顯示數字區域。如下所示：
|
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
|
eBtnWrap.addEventListener('click',function(event){ /* … */ //判斷點擊的是否是按鍵 if(key){ //用switch語句判斷不同的按鍵執行對應的操作 switch(key){ //數字鍵執行操作 case 'Num': fnInputNum(value); break; //小數點操作 case 'Point': //判斷是否有已小數點，用于限制只能輸入一個小數點 if(sCurValue.indexOf('.')==-1){ sCurValue = sCurValue + '.'; bLogStatus = true; } break; } //顯示數據到顯示數字區域 fnShowResult(); }});//輸入數字function fnInputNum(num){ //根據輸入狀態判斷是替換當前數字還是添加到當前數字后面 if(bLogStatus){ sCurValue = sCurValue + num; }else{ //限制第一個數字不能是0 if(num!=0){ bLogStatus = true; } sCurValue = num; }}//顯示計算結果function fnShowResult(){ //顯示計算公式 eNumSave.innerHTML = sStep; //限制數字總長度 if(sCurValue.length>14){ sCurValue = sCurValue.slice(0,14); } //顯示當前數字 eNumCur.innerHTML = sCurValue;} |
這時候已經可以點擊數字和小數點，輸入到計算器顯示屏上，如圖所示：
3.3 加減乘除運算
計算器最基本的就是加減乘除運算。為了實現對數字進行加減乘除并計算結果功能，封裝fnCountResult、fnBaseCount和fnEqual三個函數。
fnCountResult用于根據運算符計算結果；
fnBaseCount修改計算公式或計算結果；
fnEqual用于按下=號時計算結果，并重置數據。如下所示：
|
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
|
eBtnWrap.addEventListener('click',function(event){ /* … */ //判斷點擊的是否是按鍵 if(key){ //用switch語句判斷不同的按鍵執行對應的操作 switch(key){ /* … */ //加減乘除基本運算 case 'Base': fnBaseCount(value); break; //等于 case 'Equal': fnEqual(); break; } //顯示數據到顯示數字區域 fnShowResult(); }});//計算結果function fnCountResult(){ //判斷當前運算符并執行運算 switch(sMark){ case '+': nResult = nResult===null?+sCurValue:nResult + (+sCurValue); break; case '-': nResult = nResult===null?+sCurValue:nResult - sCurValue; break; case '*': nResult = nResult===null?+sCurValue:nResult * sCurValue; break; case '/': nResult = nResult===null?+sCurValue:nResult / sCurValue; break; default: nResult = +sCurValue; }}//加減乘除基礎運算function fnBaseCount(key){ //如果是輸入狀態,進行運算 if(bLogStatus){ //修改輸入狀態 bLogStatus = false; //計算公式 sStep = sStep + ' ' + sCurValue + ' ' + key; //計算結果 fnCountResult(); sCurValue = ''+nResult; }else{ //如果公式為空,先加上原始數字 if(sStep==''){ sStep = sCurValue + ' ' + key; }else{ //如果已有公式,更改最后的運算符 sStep = sStep.slice(0,sStep.length-1) + ' ' + key; } } //更改運算符,用于計算 sMark = key;}//等于function fnEqual(){ //如果沒有運算符，阻止后續操作 if(sMark=='')return; //計算結果 fnCountResult(); sCurValue = ''+nResult; //重置數據 sStep = ''; sMark = ''; bLogStatus = false;} |
現在已經可以在計算器上做加減乘除的計算了，如圖所示：
3.4 再給其他按鍵添加操作，代碼如下所示：
|
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
|
eBtnWrap.addEventListener('click',function(event){ /* … */ //判斷點擊的是否是按鍵 if(key){ //用switch語句判斷不同的按鍵執行對應的操作 switch(key){ /* … */ //清除 case 'Clear': fnClear() break; //退格 case 'BACK': fnBack(); break; //CE case 'CE': //清空當前顯示數值 sCurValue = '0'; bLogStatus = false; break; //取反 case 'Negate': //當前數值取反 sCurValue = ''+(-sCurValue); break; //取平方根 case 'Square': //當前數值取平方根 nResult = Math.sqrt(+sCurValue); //其他數據初始化 sCurValue = ''+nResult; sStep = ''; sMark = ''; bLogStatus = false; break; //倒數 case 'Reciprocal': //當前數值取倒數 //其他數據初始化 nResult = 1/sCurValue; sCurValue = ''+nResult; sStep = ''; sMark = ''; bLogStatus = false; break; //M系列 case 'MC': //記憶數值清零 nMvalue = 0; fnShowM() break; case 'MR': //顯示記憶數值 sCurValue = '' + nMvalue; fnShowM() break; case 'MS': //記憶數值改為當前數值 nMvalue = +sCurValue; fnShowM() break; case 'MA': //當前數值加到記憶數值中 nMvalue += +sCurValue; fnShowM() break; case 'ML': //從記憶數值中減去當前數值 nMvalue -= +sCurValue; fnShowM() break; } //顯示數據到顯示數字區域 fnShowResult(); }});//清除function fnClear(){ //初始化所有數據 sStep = ''; sCurValue = '0'; nResult = null; sMark = ''; bLogStatus = false;}//退格function fnBack(){ //必須是輸入狀態才可以退格 if(bLogStatus){ //減去數值最后一位數 sCurValue = sCurValue.slice(0,sCurValue.length-1); //如果最后數值為空或負號(-)，改為0，重置輸入狀態為false，不可再退格 if(sCurValue==''||sCurValue=='-'){ sCurValue = '0'; bLogStatus = false; } }}//判斷是否有M記憶存儲function fnShowM(){ bLogStatus = false; //判斷是否顯示記憶存儲標志 eShowM.style.display = nMvalue==0?'none':'block';} |
4 綁定鍵盤事件
寫到這里，計算器已經可以正常使用了。不過只能用鼠標點擊按鍵操作效率不高，為了可以更快的使用計算器，還需要加上鍵盤事件，當按下對應按鍵時，執行操作，如下所示：
|
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
|
//鍵盤事件document.addEventListener('keyup',function(event){ //獲取當前鍵盤按鍵 var key = event.key; //獲取按鍵code var code = event.keyCode; //限制正確的按鍵才修改顯示的數據 var comply = false; //輸入數字 if((code>=48&&code<=57)||(code>=96&&code<=105)){ fnInputNum(key); comply = true; } //加減乘除 if( key=='*'||key=='+'||key=='/'||key=='-'){ fnBaseCount(key); comply = true; } //esc鍵 if(code==27){ fnClear(); comply = true; } //回車鍵 if(code==13){ fnEqual(); comply = true; } //退格鍵 if(code==8){ fnBack(); comply = true; } if(comply){ //顯示數據到計算器屏幕 fnShowResult(); }}); |
一個簡單的計算器就完成了，如果以學習為目的話，建議不要直接復制代碼，最好直接手動輸入代碼及注釋，加深印象和提高學習效果。
總結
到此這篇關于使用原生javascript開發計算器的文章就介紹到這了,更多相關原生js開發計算器內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/jiangweiping/p/14418393.html
