JavaScript實現一個簡易的計算器

寫在最前的一些‘廢話’

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

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

正文

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

正常顯示介面

錯誤提示介面

- 實現思路

1. 使用table畫出整個介面。
   借鑑了其他人已經實現了的結構，發現他們有一些人沒有直接在td裡寫1，2，3或者退格什麼的，而是又巢狀了一個button，我其實到現在也沒有太理解為什麼要這樣，只是在排版的時候感覺到有些作用：因為margin對td 不起作用，只能設定padding。
2. 使用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]。