言

這個小練手旨在幫助剛上手學習JavaScript的同學練習最基本的Js知識，大神勿噴哈，由于這個是非常簡易的計算器，可以完成的功能有加減乘除和AC（清屏），DEL（退格）等基本運算，所以代碼也不復雜，我會先放出代碼，然后再講解我的思路，非常簡單，只要你按照我的思路走，15分鐘不到我保證你也可以敲出同樣的代碼，當然主要還是希望可以為入門的同學提供一種解決問題的思路，各位看完后可以自己動手敲一遍哈。

HTML代碼部分

HTML這部分非常簡單，沒什么多說的，整個框架我利用<table>搭建的，需要注意的是，由于計算器屏幕不可輸入，我設置為了disabled。

CSS代碼部分

CSS也是簡單設定了一下寬高，我是在火狐瀏覽器上運行的，由于我沒使用百分比來設置寬高，在其他瀏覽器上樣式會發生一定程度上的改變，不過不影響功能就是了。

JavaScript部分

請先不要直接看這部分代碼，先看我的思路講解再看這部分，你絕對可以輕松理解

思路講解

請先不要看上面的JS代碼，接下來請試著跟著我的思路走，完成這個計算器的功能，我是分成三個部分來解決的，第一部分是將除了AC，DEL這兩個鍵之外的按鍵值獲取到屏幕上，第二部分是計算屏幕上的表達式的值，第三部分是添加AC（清屏），DEL（退格）功能，檢查BUG。

• 第一部分：獲取值到屏幕上

我認為解決簡單的JS問題大體都可以分三步：

• 1.獲取你想操作的元素；

• 2.保存你想操作的元素；

• 3.對元素進行（遍歷）操作；

我的第一步目的是將除了AC，DEL這兩個鍵之外的按鍵值獲取到屏幕上，那么我首先得獲取按鈕元素以及屏幕元素并將它們保存在btn_txt和txt變量里：

獲取并保存了想操作的元素，接下來就對他們添加操作：

在進行操作的之前請等一下，我們思考一下，btn_txt數組里存放著0,1,2,3,4,5,6,7,8,9，" . "，" + "，" - "，" * "，" \ "，" = "等一系列東西，我們當然要對數字和計算符號進行分開操作，所以我們用If……else……來判斷一下

OK，我們接下來先考慮用戶輸入的是數字或者點的情況，首先數字可以連續輸入到屏幕里，但是小數點不應該能連續輸入到屏幕里，小數點應該只有一個才對，所以我們應該先加一個判斷條件：屏幕里是否有小數點存在？如果屏幕里已經有小數點存在，那么我只允許你再輸入數字，否則屏幕值不會接收，即是如下代碼：

好了，用戶輸入的是數字或者點的情況已經考慮結束了，現在考慮用戶輸入的是運算符號的情況！這種情況也分兩部分，一種是用戶按了等號，一種是按了除等號之外的其他加減乘除運算符號，因為等號比較特殊一點，按了就直接應該得出結果了，所以要區用if……else……分開。我這樣的思路你可以理解吧！

還有一個事情我們要考慮的是，我希望在我按下加減乘除運算符號時可以清屏，這樣我就可以繼續鍵入下一數字了（舉例：我按下數字“5”，再按下運算符“ + ”，按下瞬間屏幕清屏，然后我再鍵入數字“3”，最后按下“ = ”，最后得出結果“2”），但是清屏我并不想讓我的數據丟失，所以此時我先新建一個數組來保存這些數據（這里的“數據”指數字和運算符，也叫“表達式”），然后再清屏！具體代碼如下：

• 第二部分：計算屏幕上的表達式的值

好了下面我們討論用戶按下等號鍵的情況，這種比較簡單，直接對表達式（表達式就是我們之前輸入的數字與符號組合）進行計算就可以啦，需要注意的是計算完成之后要把保存表達式的數組way_res清空，因為本次運算完滿結束了，如果不清空里面的數據會影響下一次正常計算；

• 第三部分：添加AC，DEL功能，檢查BUG

首先，獲取清空按鈕和退格按鈕，然后把它們保存在btn_way變量下；

然后就遍歷進行添加功能，這里同樣需要一個if……else……語句來判斷用戶按的是AC按鈕還是DEL按鈕

到這里為止，所有功能基本上全部添加完畢，然后我們進行調試，發現一個問題，就是當我們第一次按鍵就按小數點“ . ”時，這時用戶的本意應為“ 0. ”,意即用戶是想輸入小數的，但是懶得按“0”，直接按了小數點，所以我們應該加一個判斷條件來幫助用戶，直接按小數點成為有意義的行為，代碼如下：

好了，最后再加上window.onload = function(){}，代碼，到這里就全部結束了；大家有不理解的地方歡迎在評論里問我；

再放一遍JavaScript全代碼

• 于想做一個計算器了，少少幾行js代碼而已。
• 網上有很多的html計算器的實例，大多是用table來做的，但我還是選擇用div來做。
• 這個計算器有基本的運算功能，但一些細的糾錯，就沒再細究了，極簡嘛。
• 更多文章，請關注我的頭條號，我是落筆承冰。

一、開始吧，先做一個360*500的盒子。

二、加入輸入框，輸入框給它270寬，再配個灰色背景。

三、做18個div，我覺得這樣子比table標簽更直觀，其實你還是什么都看不見，因為字是黑色的，背景黑色的。

四、行了，我們給div加樣式吧。

• 盒子天生獨占一行，我們做一下修改讓它擺得整齊些。

五、我們讓這18個按鈕浮動，它們就不會獨占一行了，然后再讓它們外部上下左右距離為5px。

• 整體的樣子是有了。

六、把按鍵做成圓的，里面的字居中，然后再把字變大。

• 注釋占了太多行，后面我就不寫這么多了，特別是重復的。

七、把計算器的整體外觀也改改。

• 內部距離20px，再加20px的圓角。

八、“=”和“0” 這兩個一個是加高，一個是加寬，我們得再加樣式區別對待。

• 按鈕變長了，但是卻空了一行。

九、我們讓等號按鈕右浮動就可以了。

十、對按鈕再修飾，做兩個樣式，一個是灰白色，一個是土黃色。

十一、對輸入框做個修飾，最終完成界面設計。

十二、我們整個js只用獲取一個元素對象，那就是input。

十三、做按鈕點擊事件，把大多數按鈕的點擊都寫進去，這里我特意用箭頭函數，當學習吧。

幾乎所有的按鈕都調用這個clickbt函數，唯有“=”號不用。

十四、該是為“=”加函數的時候了，這里用了eval()，能把字符串當算式運算出結果。

十五、總結，到此為止，整個計算器就做出來了，大家會發現js部分很簡單，因為我們只有一般的加減乘除計算，有更多想法的朋友，自己補充吧。

學視頻稍后補上

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

使用html和css 復刻圖片計算器的UI

注意右邊是html css 實現的UI

如果是新人，請觀看之前的視頻講解 ： 跟浩哥學編程 做一個簡單的計算器 （一）（二）（三）（四）

先介紹一個web開發學習的火箭助推器

https://thimble.mozilla.org/zh-CN/ 或者 https://codepen.io/ 可在線編輯及時預覽。打開網站就開始，不用下載不用安裝。而且上邊有無數精美源碼可在線翻看。

在線編寫代碼 并且及時預覽

想要源碼的請點贊，評論留言，我會私信你源碼，多謝多謝。鼓勵一下原創。