上节课主要讲解的是一个注册页面，各种表单元素使用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函数，然后编写调用函数，然后进行测试调整，直到符合预期结果。