十五分鐘用 JavaScript 基礎寫一個簡易計算器 + 思路詳解
閱讀 1220
收藏 77
2017-04-12
原文鏈接：http://www.lxweimin.com/p/13aec71c854c
這個小練手旨在幫助剛上手學習 JavaScript 的同學練習最基本的 Js 知識 —— 由Joe19970619分享
*完成的基本樣式
前言
這個小練手旨在幫助剛上手學習JavaScript的同學練習最基本的Js知識，大神勿噴哈，由于這個是非常簡易的計算器，可以完成的功能有加減乘除和AC（清屏），DEL（退格）等基本運算，所以代碼也不復雜，我會先放出代碼，然后再講解我的思路，非常簡單，只要你按照我的思路走，15分鐘不到我保證你也可以敲出同樣的代碼，當然主要還是希望可以為入門的同學提供一種解決問題的思路，各位看完后可以自己動手敲一遍哈。
HTML代碼部分
<table> <tr> <td colspan="4"><input class="txt" type="text" disabled/></td> </tr> <tr> <td colspan="2"><input class="btn_click" type="button" value="AC"/></td> <td colspan="2"><input class="btn_click" type="button" value="DEL"/></td> </tr> <tr> <td><input class="btn" type="button" value="7"/></td> <td><input class="btn" type="button" value="8"/></td> <td><input class="btn" type="button" value="9"/></td> <td><input class="btn" type="button" value="*"/></td> </tr> <tr> <td><input class="btn" type="button" value="4"/></td> <td><input class="btn" type="button" value="5"/></td> <td><input class="btn" type="button" value="6"/></td> <td><input class="btn" type="button" value="/"/></td> </tr> <tr> <td><input class="btn" type="button" value="1"/></td> <td><input class="btn" type="button" value="2"/></td> <td><input class="btn" type="button" value="3"/></td> <td><input class="btn" type="button" value="-"/></td> </tr> <tr> <td><input class="btn" type="button" value="0"/></td> <td><input class="btn" type="button" value="."/></td> <td><input class="btn" type="button" value="+"/></td> <td><input class="btn" type="button" value="="/></td> </tr></table>
HTML這部分非常簡單，沒什么多說的，整個框架我利用<table>搭建的，需要注意的是，由于計算器屏幕不可輸入，我設置為了disabled。
CSS代碼部分
<style> table{ border-collapse: collapse; margin: auto auto; } td{ width: 150px; line-height: 70px; } .btn{ width: 150px; line-height: 70px; font-size: x-large; } .btn_click{ width: 302px; line-height: 70px; font-size: x-large; } .txt{ width: 600px; line-height: 100px; font-size: x-large;text-align: right; } </style>
CSS也是簡單設定了一下寬高，我是在火狐瀏覽器上運行的，由于我沒使用百分比來設置寬高，在其他瀏覽器上樣式會發生一定程度上的改變，不過不影響功能就是了。
JavaScript部分
請先不要直接看這部分代碼，先看我的思路講解再看這部分，你絕對可以輕松理解
<script> /在網頁加載時 給按鈕添加點擊事件/ window.onload = function () { //定義數組 來接收用戶按的數字和計算符號 var way_res = []; //獲取按鈕對象 var btn_txt = document.getElementsByClassName("btn"); //獲取屏幕元素 var txt = document.getElementsByClassName("txt")[0]; //獲取清空按鈕和退格按鈕 var btn_way = document.getElementsByClassName("btn_click"); for (var i = 0; i < btn_way.length; i++) { btn_way[i].onclick = function () { //判斷按鈕 if (this.value == "AC") { way_res = []; txt.value = ""; } else { /* substr() 截斷字符串 1.從那個位置開始 2.截取多少長度/ txt.value = txt.value.substr(0, txt.value.length - 1); } } } //給btn_txt 數組對象添加事件 for (var i = 0; i < btn_txt.length; i++) { btn_txt[i].onclick = function () { / this 指代的是當前事件的執行對象/ /按完鍵將值傳給屏幕/ /判斷是否為數字/ if (txt.value == "" && this.value == ".") { txt.value = "0."; } else { if (!isNaN(this.value) || this.value == ".") { /用戶輸入的是數字或者點的情況/ /indexOf() 用來查找字符 如果有返回當前位置 如果沒有返回-1/ if (txt.value.indexOf(".") != -1) { /有點存在的情況/ if (this.value != ".") { /當前按得不是點，進行拼接/ txt.value += this.value; } } else { /沒點存在直接拼接/ txt.value += this.value; } } else { /是符號的情況/ //先存值 在清屏 if (this.value != "=") { /是符號但不為等號的情況/ way_res[way_res.length] = txt.value; //存符號 way_res[way_res.length] = this.value; //清屏 txt.value = ""; } else { /是等號的情況*/ way_res[way_res.length] = txt.value; //eval()方法 專門用來計算表達式的值 txt.value = eval(way_res.join("")); //計算完成之后將數組清空 way_res = []; } } } } } }</script>
思路講解
請先不要看上面的JS代碼，接下來請試著跟著我的思路走，完成這個計算器的功能，我是分成三個部分來解決的，第一部分是將除了AC，DEL這兩個鍵之外的按鍵值獲取到屏幕上，第二部分是計算屏幕上的表達式的值，第三部分是添加AC（清屏），DEL（退格）功能，檢查BUG。
第一部分：獲取值到屏幕上
我認為解決簡單的JS問題大體都可以分三步：
1.獲取你想操作的元素；
2.保存你想操作的元素；
3.對元素進行（遍歷）操作；
我的第一步目的是將除了AC，DEL這兩個鍵之外的按鍵值獲取到屏幕上，那么我首先得獲取按鈕元素以及屏幕元素并將它們保存在btn_txt和txt變量里：
//獲取按鈕對象 var btn_txt = document.getElementsByClassName("btn"); //獲取屏幕元素 var txt = document.getElementsByClassName("txt")[0];
獲取并保存了想操作的元素，接下來就對他們添加操作：
//給btn_txt 數組對象添加onclick事件 for (var i = 0; i < btn_txt.length; i++) { btn_txt[i].onclick = function () { }
*
在進行操作的之前請等一下，我們思考一下，btn_txt數組里存放著0,1,2,3,4,5,6,7,8,9，" . "，" + "，" - "，" * "，" \ "，" = "等一系列東西，我們當然要對數字和計算符號進行分開操作，所以我們用If……else……來判斷一下
if (!isNaN(this.value) || this.value == ".") { /用戶輸入的是數字或者點的情況/ /* this 指代的是當前事件的執行對象/} else{ /用戶輸入的是符號的情況*/}
OK，我們接下來先考慮用戶輸入的是數字或者點的情況，首先數字可以連續輸入到屏幕里，但是小數點不應該能連續輸入到屏幕里，小數點應該只有一個才對，所以我們應該先加一個判斷條件：屏幕里是否有小數點存在？如果屏幕里已經有小數點存在，那么我只允許你再輸入數字，否則屏幕值不會接收，即是如下代碼：
if (!isNaN(this.value) || this.value == ".") { /用戶輸入的是數字或者點的情況/ /* this 指代的是當前事件的執行對象/ /有點存在的情況/ if (txt.value.indexOf(".") != -1) { /indexOf() 用來查找字符 如果有 返回當前位置 如果沒有 返回-1/ if (this.value != ".") { /當前按得不是點，進行拼接/ txt.value += this.value; /這里的txt.value += this.value;意思是 將當前用戶所按的數字添加到屏幕上去/ } } else { /沒點存在直接拼接/ txt.value += this.value; } }else{ /用戶輸入的是符號的情況接下來再考慮*/}
好了，用戶輸入的是數字或者點的情況已經考慮結束了，現在考慮用戶輸入的是運算符號的情況！這種情況也分兩部分，一種是用戶按了等號，一種是按了除等號之外的其他加減乘除運算符號，因為等號比較特殊一點，按了就直接應該得出結果了，所以要區用if……else……分開。我這樣的思路你可以理解吧！
還有一個事情我們要考慮的是，我希望在我按下加減乘除運算符號時可以清屏，這樣我就可以繼續鍵入下一數字了（舉例：我按下數字“5”，再按下運算符“ + ”，按下瞬間屏幕清屏，然后我再鍵入數字“3”，最后按下“ = ”，最后得出結果“2”），但是清屏我并不想讓我的數據丟失，所以此時我先新建一個數組來保存這些數據（這里的“數據”指數字和運算符，也叫“表達式”），然后再清屏！具體代碼如下：
var way_res = [];/先自定義一個數組 來接收用戶按的數字和計算符號注意這里定義要在開頭定義，而不是在函數內部/if (!isNaN(this.value) || this.value == ".") { /用戶輸入的是數字或者點的情況/ /上面已經討論過了，這里我省點地方/}else{ /用戶輸入的是符號的情況/ //先存值 在清屏 if (this.value != "=") { /是符號但不為等號的情況/ way_res[way_res.length] = txt.value; //存符號 way_res[way_res.length] = this.value; //清屏 txt.value = ""; } else{ /為等號的情況下面討論/ }}
第二部分：計算屏幕上的表達式的值
好了下面我們討論用戶按下等號鍵的情況，這種比較簡單，直接對表達式（表達式就是我們之前輸入的數字與符號組合）進行計算就可以啦，需要注意的是計算完成之后要把保存表達式的數組way_res清空，因為本次運算完滿結束了，如果不清空里面的數據會影響下一次正常計算；
else { /為等號的情況即是計算屏幕上表達式的值/ //先將屏幕上所有值保存到數組里 way_res[way_res.length] = txt.value; //eval()方法 專門用來計算表達式的值 //join()方法 將數組的每位拼接成字符串 txt.value = eval(way_res.join("")); //計算完成之后將數組清空 way_res = []; }
第三部分：添加AC，DEL功能，檢查BUG
首先，獲取清空按鈕和退格按鈕，然后把它們保存在btn_way變量下；然后就遍歷進行添加功能，這里同樣需要一個if……else……語句來判斷用戶按的是AC按鈕還是DEL按鈕
var btn_way = document.getElementsByClassName("btn_click");//獲取清空按鈕和退格按鈕 for (var i = 0; i < btn_way.length; i++) { btn_way[i].onclick = function () { //判斷按鈕 if (this.value == "AC") { //如果是AC按鈕，那么清空屏幕和數組里的一切值 way_res = []; txt.value = ""; } else { //不是AC，那必然是DEL，我們把屏幕的最后一位抹去再重新賦給屏幕 /* substr(參數1，參數2) 截斷字符串 參數1.從那個位置開始 參數2.截取多少長度*/ txt.value = txt.value.substr(0, txt.value.length - 1); } }}
到這里為止，所有功能基本上全部添加完畢，然后我們進行調試，發現一個問題，就是當我們第一次按鍵就按小數點“ . ”時，這時用戶的本意應為“ 0. ”,意即用戶是想輸入小數的，但是懶得按“0”，直接按了小數點，所以我們應該加一個判斷條件來幫助用戶，直接按小數點成為有意義的行為，代碼如下：
if (txt.value == "" && this.value == ".") { txt.value = "0."; }
好了，最后再加上window.onload = function(){}，代碼，到這里就全部結束了；大家有不理解的地方歡迎在評論里問我；
再放一遍JavaScript全代碼
<script> window.onload = function () { var way_res = []; var btn_txt = document.getElementsByClassName("btn"); var txt = document.getElementsByClassName("txt")[0]; var btn_way = document.getElementsByClassName("btn_click"); for (var i = 0; i < btn_way.length; i++) { btn_way[i].onclick = function () { if (this.value == "AC") { way_res = []; txt.value = ""; } else { txt.value = txt.value.substr(0, txt.value.length - 1); } } } for (var i = 0; i < btn_txt.length; i++) { btn_txt[i].onclick = function () { if (txt.value == "" && this.value == ".") { txt.value = "0."; } else { if (!isNaN(this.value) || this.value == ".") { if (txt.value.indexOf(".") != -1) { if (this.value != ".") { txt.value += this.value; } } else { txt.value += this.value; } } else { if (this.value != "=") { way_res[way_res.length] = txt.value; way_res[way_res.length] = this.value; txt.value = ""; } else { way_res[way_res.length] = txt.value; txt.value = eval(way_res.join("")); way_res = []; } } } } } }</script>
