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

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

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

三、做18個div，我覺得這樣子比table標(biāo)簽更直觀，其實(shí)你還是什么都看不見，因?yàn)樽质呛谏模尘昂谏摹?/p>

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

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

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

• 整體的樣子是有了。

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

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

七、把計(jì)算器的整體外觀也改改。

• 內(nèi)部距離20px，再加20px的圓角。

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

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

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

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

十一、對輸入框做個修飾，最終完成界面設(shè)計(jì)。

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

十三、做按鈕點(diǎn)擊事件，把大多數(shù)按鈕的點(diǎn)擊都寫進(jìn)去，這里我特意用箭頭函數(shù)，當(dāng)學(xué)習(xí)吧。

幾乎所有的按鈕都調(diào)用這個clickbt函數(shù)，唯有“=”號不用。

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

十五、總結(jié)，到此為止，整個計(jì)算器就做出來了，大家會發(fā)現(xiàn)js部分很簡單，因?yàn)槲覀冎挥幸话愕募訙p乘除計(jì)算，有更多想法的朋友，自己補(bǔ)充吧。

了一個簡單的計(jì)算器例子。覺得實(shí)用的小伙伴可以看看如何實(shí)現(xiàn)該效果！

先上效果圖：

原理我相信大家都懂了。下面就直接進(jìn)入代碼環(huán)節(jié)！

html:

css代碼就不提供了，按你個人喜好設(shè)置樣式即可，下面來看看JS代碼：