Osheep

时光不回头,当下最重要。

0046 JavaScript实现四则运算器程序

上节课主要讲解的是一个注册页面,各种表单元素使用JavaScript来检查输入。
这节课来做一个比较好玩的加减乘除四则运算器程序。

程序设计思路

在第1章里面,曾经做过一个python程序的加减乘除四则运算器程序。
这节课来用JavaScript来实现一个同样的四则运算器程序。
页面加载之后,随机生成一道题目,2个数字和1个运算符都是随机的,然后右侧放一个输入框,用户输入答案之后,点击下方的检查按钮,页面显示是否回答正确,然后最上方的累积题目数和获得分数增加,10道题目做完之后,alert显示总分数然后重新开始。做题当中岁时可以点击重新开始按钮,重新来一次10道题目的计算。

大致的界面显示效果是这样的:

《0046 JavaScript实现四则运算器程序》

3-5-1.jpg

首先,在html文件中将所有的显示元素都编写出来。
然后,设置好测试文字内容,编写相应的CSS样式文件,调整好所有元素的显示样式。
再然后,编写随机函数生成题目显示在网页。
再之后,编写检查按钮的事件函数,检查输入的答案是合法的数字,检查结果是否正确,显示结果到alert窗口,修改题目个数和分数内容,判断是否全部结束,全部结束则alert显示总分数并重新开始。

编写页面显示内容和样式

创建3个文件,cala.html,cala.js,cala.css。
编写网页内容,全部使用div来实现。
cala.html代码如下:

《0046 JavaScript实现四则运算器程序》

3-5-2.jpg

给网页元素设置样式,字体变大一些,颜色好看一些。
cala.css代码如下:

《0046 JavaScript实现四则运算器程序》

3-5-3.jpg
《0046 JavaScript实现四则运算器程序》

3-5-4.jpg
《0046 JavaScript实现四则运算器程序》

3-5-5.jpg

刷新网页:

《0046 JavaScript实现四则运算器程序》

3-5-6.jpg

可以看到每个网页元素的测试内容和样式都准备好了。

随机生成题目

接下来,编写网页初始化的时候要处理的事情。
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代码如下:

《0046 JavaScript实现四则运算器程序》

3-5-7.jpg

修改html文件,页面初始化时调用initPage函数,一般可以在body的onload事件中调用。
cala.html代码如下:

《0046 JavaScript实现四则运算器程序》

3-5-8.jpg

刷新网页:

《0046 JavaScript实现四则运算器程序》

3-5-9.jpg

可以看到第一道题目显示出来了。多刷新几次,看看是否随机出现不同的数字和运算符。

检查答案是否正确

接下来,编写点击检查按钮的时候的函数checkResult。
首先检查输入的所有字符都必须是数字,然后取得2个数字和运算符,然后先计算出正确的结果,然后和输入的结果进行比较,如果相同则将分数加10分,否则不加分,然后显示alert,消息是“计算正确”或者“计算错误”,然后调用下一题函数nextSubject。
然后修改html文件的检查按钮的onclick事件,调用checkResult函数,修改重新开始按钮,调用initPage函数。

cala.js代码如下:

《0046 JavaScript实现四则运算器程序》

3-5-10.jpg
《0046 JavaScript实现四则运算器程序》

3-5-11.jpg

cala.html代码如下:

《0046 JavaScript实现四则运算器程序》

3-5-12.jpg

刷新网页:

《0046 JavaScript实现四则运算器程序》

3-5-13.jpg

输入正确的结果,点击检查按钮:

《0046 JavaScript实现四则运算器程序》

3-5-14.jpg

可以看到分数增加了10分,弹出窗口显示了“计算正确”,点击确定按钮:

《0046 JavaScript实现四则运算器程序》

3-5-15.jpg

可以看到题目数增加了1,并且出现了新的题目,输入一个错误的结果,点击检查按钮:

《0046 JavaScript实现四则运算器程序》

3-5-16.jpg

可以看到分数不变,弹出窗口显示了“计算错误”,点击确定按钮:

《0046 JavaScript实现四则运算器程序》

3-5-17.jpg

可以看到题目数增加了1,并且出现了新的题目。
一直不停的做下去,直到完成第10道题目:

《0046 JavaScript实现四则运算器程序》

3-5-18.jpg

可以看到,alert显示总分数并重新开始。相当于点击重新开始按钮:

《0046 JavaScript实现四则运算器程序》

3-5-19.jpg

可以看到,题目数变为1,分数变为0,出现了新的题目了。

总结一下,要做一个有着比较完整的功能的网页,一般的做法是先设计好网页元素,以及相应的事件和要处理的逻辑,然后开始编写网页,然后编写样式,然后编写各个事件的JavaScript函数,然后编写调用函数,然后进行测试调整,直到符合预期结果。

点赞