電腦的主要作用是進行數字運算，開發一個電腦功能的web執行個體，有助于更好的掌握js基礎的數字運算能力。本執行個體旨在幫助js計算能力有待提高的讀者，通過自己一步一步開發完成電腦功能，熟悉js數字處理方法。
電腦的主要作用是進行數字運算，開發一個電腦功能的web執行個體，有助于更好的掌握js基礎的數字運算能力。
本執行個體詳細分析一個js電腦的開發步驟，學習本教程時最好先具備一些基礎的js知識。
電腦包括顯示數字區域和按鍵區域兩大部分，先把電腦的這兩個區域的html元素編寫出來，如下所示：
讀者可以自己編寫一些樣式，設計一個自己喜歡的電腦效果。本執行個體的電腦效果如下圖所示：
樣式代碼：
對于新手來說，電腦功能看起來好像很複雜，那麼多按鈕、多種計算方式，不知如何開始。其實任何一個功能，隻需要理清楚思路，一步一步編寫代碼，會發現實作起來都不難。
1 擷取各個html元素
web前端不論要在頁面上做什麼，都要先擷取頁面上的各個DOM元素。看起來整個電腦的按鈕較多，實際開發中可以使用事件代理來操作按鈕，是以隻擷取所有按鈕的容器元素即可。代碼如下：
2 聲明相關變量
在運算過程中，需要一些變量來進行輔助計算、存儲結果和判斷等，如下所示：
3 按鍵上添加點選事件
因為整個電腦按鍵較多，每一個按鈕都單獨綁定一個事件會顯得太多，很繁瑣，還會影響性能，且容易出錯。是以剛才隻擷取了按鍵的外部容器 eCalculator。
再使用事件代理，就隻需要在容器上添加點選事件，判斷目前點選的按鍵是哪一個，再執行對應的計算即可。用滑鼠點選按鍵的時候，可能會因為點得太快而選擇了按鍵上的文字，是以還需要在外包容器上添加一個阻止預設行為的操作，代碼如下所示：
3.1 擷取點選的按鍵和值
通過事件函數傳入的event參數，可以擷取到滑鼠點選的元素。再通過元素上的data-key和data-value屬性判斷滑鼠點選的是哪一個按鍵以及它的值，如下所示：
3.2 判斷按鍵及值，數字鍵和小數點執行輸入操作
如果按鍵屬性data-key是'Num'表示按下的是數字，'Point'表示小數點。
這些按鍵都是執行輸入，因為數字有多個，是以把數字輸入封裝到fnInputNum函數中。再封裝fnShowResult函數把資料顯示到顯示數字區域。如下所示：
這時候已經可以點選數字和小數點，輸入到電腦顯示屏上，如圖所示：
3.3 加減乘除運算
電腦最基本的就是加減乘除運算。為了實作對數字進行加減乘除并計算結果功能，封裝fnCountResult、fnBaseCount和fnEqual三個函數。
fnCountResult用于根據運算符計算結果；
fnBaseCount修改計算公式或計算結果；
fnEqual用于按下=号時計算結果，并重置資料。如下所示：
現在已經可以在電腦上做加減乘除的計算了，如圖所示：
3.4 再給其他按鍵添加操作，代碼如下所示：
4 綁定鍵盤事件
寫到這裡，電腦已經可以正常使用了。不過隻能用滑鼠點選按鍵操作效率不高，為了可以更快的使用電腦，還需要加上鍵盤事件，當按下對應按鍵時，執行操作，如下所示：
一個簡單的電腦就完成了，如果以學習為目的話，建議不要直接複制代碼，最好直接手動輸入代碼及注釋，加深印象和提高學習效果。