一切都是爲了好玩
除了日常的畫畫頁面、寫寫業務代碼，工作之餘，一直關注並嘗試着在前端做一些好玩有趣的東西，也經常逛各種社區網站尋找靈感，今天搬弄着手機想，爲何不做一個手機計算器的web版呢？稍微想了一下大體實現思路，於是一款web應用誕生了：
會寫代碼真好：代碼繪製精美的計算器
這裏是項目的源碼倉庫
實現大體過程
既然要做成蘋果手機上的那樣，自然需要觀察這一下計算器應用的圖形界面
圖省事，把%和左邊的正負好改成了一對圓括號，對應的效果是這樣：
對應的佈局相信很多人都能做出來，不算難！也有幾個關鍵點以及細節：
佈局
- 輸入區域，防止數字或運算符輸入過多導致內容溢出
- 結果輸出區域，防止結果太長導致內容溢出
- 按鍵，大多爲圓形，只有一個爲膠囊型,並且膠囊按鍵尺寸剛好等於兩個原型按鍵加上間距
可以採用的佈局方案有：
- 浮動佈局，前四行排4個，最後一行排3個，需要給圓按鍵和膠囊按鍵設置好寬度和佔據的高度,同時設置外邊距支撐間距
- flex彈性佈局，前四行排4個，最後一行排3個，需要給圓按鍵和膠囊按鍵設置好寬度和佔據的高度，內容對齊設置爲等距對齊即可.
綜合採用了flex彈性佈局，因爲稍微簡潔一些
交互
- 按鍵按下（pc端瀏覽器應該是點擊），按鍵有色彩變化
- 按鍵按下時亦有按鍵音
鼠標hover時改變按鍵的背景色和顏色，同時播放一段準備的音頻（audio元素）
功能
- 按鍵輸入數字和運算符的組合，輸入區域展示相應的輸入
- 按下=鍵，計算結果並顯示在輸出區域
- 按下AC鍵清除輸入和上次計算的結果
- 如果輸入有誤，則輸出區域提示錯誤
給按鍵註冊UI事件（點擊），按下=鍵則運算結果 （簡單起見直接通過JavaScript裏的eval函數來運算），其他鍵則d當做輸入，每次輸入刷新視圖
後續的思考
這個項目雖不難，但是花費我不少的時間，一部分時間在思考儘可能多的佈局方式，自適應盒子的大小布局，通過JavaScript調整大小以做到圓形形狀，雖然最終都沒有采用那些方案，但是思考的同時也拓展了自己，讓自己可以輕易地跳出某些侷限性，嘗試更多的可能。
感謝閱讀，如果有興趣歡迎加入本人的公衆號：web小冰獲取我分享的最新實用、有趣的前端技術與資訊哦，也交個朋友哦