JavaScript實現一個簡易的計算器

原創

2020-02-22 09:14

寫在最前的一些‘廢話’

大概從六月十號左右開始就一直在爲期末考試（大部分）還有保研忙，本來計劃的一個周至少有一天可以安心寫代碼，但發現計劃趕不上變化，剛開始的第一週還可以有時間，但往後發現自己整個思維一直處於期末考的狀態中，根本不適合寫代碼。好吧，我承認我對coding的各種要求都挺“無語”。
期末考結束之後，又去蘇大參加了幾天夏令營，這麼忙前忙後的持續了有一個月之久。從蘇州回來，休息了兩天，就到了17號。

自己期末複習的時候就一直想要寫一個計算器，閒暇的時候也在想具體怎麼實現，覺得應該不難，但就是想寫。昨天終於可以開始動工，剛開始還以爲實現出來需要一個周左右至少兩天的時間，想着實現完我就可以先回家兩天了。但沒想到整個實現過程算比較順利吧，昨天用了大概六個小時完成了從設計到具體實現。
有大概一個月沒怎麼寫代碼了，整個大腦都不適應，反應也慢，一些基本的東西都有點模糊不清了。可能是原來就沒有太理解，再加上沒有其餘練習，導致效率有些低。

正文

實現代碼：http://codepen.io/crystalYY/pen/jAkNVz

正常顯示界面

錯誤提示界面

- 實現思路

使用table畫出整個界面。
借鑑了其他人已經實現了的結構，發現他們有一些人沒有直接在td裏寫1，2，3或者退格什麼的，而是又嵌套了一個button，我其實到現在也沒有太理解爲什麼要這樣，只是在排版的時候感覺到有些作用：因爲margin對td 不起作用，只能設置padding。
使用eval函數計算最終結果，並捕獲異常

function getResult(){
            function evalResult(){
                var result=eval(oinput.value);
                return result;          
            }
            //捕獲異常
            try{
                var x=evalResult();
                return x;
            }
            catch (e){
                oinput.className='showError';
                var errorHint=document.getElementById('errorHint');
                move(errorHint,'top',0);
                setTimeout(function(){
                    oinput.className='';
                    move(errorHint,'top',-282);
                },2000);
                return oinput.value;
            }
        }

eval函數第一次使用，w3c上對它的定義如下

eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。

有了這個函數得到最終結果就很容易了。我的思路是在用戶輸入要計算的式子時不加干預，最終的計算從input輸入框中獲取value值，然後把這個value值作爲參數傳遞給eval，並使用try catch(exception)來捕獲並處理異常。

3.通過事件代理綁定事件
因爲每個button都需要有一個點擊事件，如果一個一個去綁定，會導致代碼十分的不簡潔，而且效率也非常低。這時就可以考慮使用事件代理，由於事件冒泡的原理，我們可以把點擊事件綁定在table上，然後通過判斷事件發生的具體對象來做出不同的反應，調用不同的函數。

4.其他效果
可以根據自己的設計思路，添加其他的效果。我主要是添加了一個錯誤提示的動畫：如果eval函數拋出異常，則從上面緩慢滑下一個圖片，並且通過setTimeout來設置了停留的時間。

5.注意細節

在設置enter鍵按下獲得結果的時候，keydown事件對象應該爲整個table，並且應該阻止enter鍵的默認行爲
獲取元素樣式時需要寫一個兼容函數，因爲obj.style.attr只能獲取行間樣式，要像獲取外部樣式需要用getComputedStyle(obj,false)[attr]或兼容IE的obj.currentStyle[attr]。