0046 JavaScript實現四則運算器程序

上節課主要講解的是一個註冊頁面，各種表單元素使用JavaScript來檢查輸入。

這節課來做一個比較好玩的加減乘除四則運算器程序。

程序設計思路

在第1章裡面，曾經做過一個python程序的加減乘除四則運算器程序。

這節課來用JavaScript來實現一個同樣的四則運算器程序。

頁面載入之後，隨機生成一道題目，2個數字和1個運算符都是隨機的，然後右側放一個輸入框，用戶輸入答案之後，點擊下方的檢查按鈕，頁面顯示是否回答正確，然後最上方的累積題目數和獲得分數增加，10道題目做完之後，alert顯示總分數然後重新開始。做題當中歲時可以點擊重新開始按鈕，重新來一次10道題目的計算。

大致的界面顯示效果是這樣的：

首先，在html文件中將所有的顯示元素都編寫出來。

然後，設置好測試文字內容，編寫相應的CSS樣式文件，調整好所有元素的顯示樣式。

再然後，編寫隨機函數生成題目顯示在網頁。

再之後，編寫檢查按鈕的事件函數，檢查輸入的答案是合法的數字，檢查結果是否正確，顯示結果到alert窗口，修改題目個數和分數內容，判斷是否全部結束，全部結束則alert顯示總分數並重新開始。

編寫頁面顯示內容和樣式

創建3個文件，cala.html，cala.js，cala.css。

編寫網頁內容，全部使用div來實現。

cala.html代碼如下：

給網頁元素設置樣式，字體變大一些，顏色好看一些。

cala.css代碼如下：

刷新網頁：

可以看到每個網頁元素的測試內容和樣式都準備好了。

隨機生成題目

接下來，編寫網頁初始化的時候要處理的事情。

1.初始化函數initPage：設置題目數為1，設置分數為0，設置2個數字和運算符的內容為空，調用生成題目函數nextSubject。

2.生成題目函數nextSubject：隨機生成1到4之間的數字作為運算符，隨機生成第1個數，數字範圍是1到99之間，隨機生成第2個數，如果運算符是2或者4，則數字範圍是1到第1個數字之間，否則是1到99之間。將隨機數設置到網頁元素上，根據運算符數字1到4對應顯示加減乘除符號，將結果輸入的內容設置為空，將題目數加1。

JavaScript的隨機函數用法是這樣的：

Math.random()方法可返回介於 0 ~ 1 之間的一個隨機數。

然後利用Math.ceil()進行四捨五入處理。

Math.ceil()是向上取整的，例如 Math.ceil(2.1)=2，Math.ceil(2.9)=2。

如果要生成隨機數範圍是1到99，則將Math.random()的結果乘以99，然後再用Math.ceil向上取整。

var number1=Math.ceil(Math.random()*99);

如果要生成隨機數範圍是1到number1，則這樣寫：

var number2=Math.ceil(Math.random()*number1;

編寫上面的2個JavaScript函數如下：

cala.js代碼如下：

修改html文件，頁面初始化時調用initPage函數，一般可以在body的onload事件中調用。

cala.html代碼如下：

刷新網頁：

可以看到第一道題目顯示出來了。多刷新幾次，看看是否隨機出現不同的數字和運算符。

檢查答案是否正確

接下來，編寫點擊檢查按鈕的時候的函數checkResult。

首先檢查輸入的所有字元都必須是數字，然後取得2個數字和運算符，然後先計算出正確的結果，然後和輸入的結果進行比較，如果相同則將分數加10分，否則不加分，然後顯示alert，消息是「計算正確」或者「計算錯誤」，然後調用下一題函數nextSubject。

然後修改html文件的檢查按鈕的onclick事件，調用checkResult函數，修改重新開始按鈕，調用initPage函數。

cala.js代碼如下：

cala.html代碼如下：

刷新網頁：

輸入正確的結果，點擊檢查按鈕：

可以看到分數增加了10分，彈出窗口顯示了「計算正確」，點擊確定按鈕：

可以看到題目數增加了1，並且出現了新的題目，輸入一個錯誤的結果，點擊檢查按鈕：

可以看到分數不變，彈出窗口顯示了「計算錯誤」，點擊確定按鈕：

可以看到題目數增加了1，並且出現了新的題目。

一直不停的做下去，直到完成第10道題目：

可以看到，alert顯示總分數並重新開始。相當於點擊重新開始按鈕：

可以看到，題目數變為1，分數變為0，出現了新的題目了。

總結一下，要做一個有著比較完整的功能的網頁，一般的做法是先設計好網頁元素，以及相應的事件和要處理的邏輯，然後開始編寫網頁，然後編寫樣式，然後編寫各個事件的JavaScript函數，然後編寫調用函數，然後進行測試調整，直到符合預期結果。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！