在之前一个练习题上进行改动,做了一个200以内的加减法的小练习的页面。
加减法随机生成:
如果是加法,则和在200以内。
如果是减法,则差不会为负数。
运行效果
源代码
<!-- /*
* @Author: Chauncey Yuan
* @Date: 2019-08-01 18:25:30
* @Last Modified by: Chauncey Yuan
* @Last Modified time: 2019-08-03 08:24:27
*/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.cal_game {
width: 650px;
margin: 0 auto;
}
table {
margin: 0 auto;
}
td {
width: 150px;
height: 50px;
text-align: center;
line-height: 40px;
border: 1px solid #ab15fd;
}
.btn {
width: 150px;
height: 50px;
color: #ab15fd;
border: 1px solid #ab15fd;
background-color: #fff;
}
.btn:hover {
background-color: #ab15fd;
color: #fff;
cursor: pointer;
}
input {
height: 30px;
border: 1px solid #999999;
}
</style>
</head>
<body>
<div class="cal_game">
<table>
<tr>
<td id="output" colspan="3"></td>
</tr>
<tr>
<td>题目</td>
<td id="eq" colspan="2"></td>
</tr>
<tr>
<td>答案</td>
<td><input type="text" name="" id="input" placeholder="请输入计算结果:"></td>
<td><button class="btn" onclick="xun()">计算</button></td>
</tr>
<tr>
<td>正误</td>
<td id="result" colspan="2"></td>
</tr>
<tr>
<td>得分</td>
<td id="score" colspan="2"></td>
</tr>
<tr>
<td id="accuracy" colspan="3"></td>
</tr>
</table>
</div>
<script>
// 定义题号,使用时+1
var i = 0;
// 定义计算正确的次数
var right_times = 0;
// 定义分数
var score = 0;
// 定义正确率
var accuracy = 0;
// 定义加减法符号数组,用于后边产生0或1的随机数,来确定加减法
var sign_operation_list = ["+", "-"];
// 生成0或者1的随机数,确定加减法
var sign_operation = Math.floor((Math.random() * (1 - 0 + 1)) + 0);
// 显示题号
document.getElementById("output").innerHTML = "第" + (i + 1) + "题";
// 如果是减法
if (sign_operation == 1) {
// 则被减数应该小于减数,结果才不会为负数
// 减数范围为0-200
var num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
// 被减数范围为0-减数
var num2 = Math.floor(Math.random() * (num1 - 0 + 1) + 0);
}
// 如果是加法
if (sign_operation == 0) {
// 两数和应小于200
// 第一个数的范围是0-200
var num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
// 第二个数是0-(200-第一个数)
var num2 = Math.floor(Math.random() * (200 - num1 - 0 + 1) + 0);
}
// 组成算式,显示给用户看
var eq = String(num1) + sign_operation_list[sign_operation] + String(num2) + "=";
// 页面中显示算式
document.getElementById("eq").innerHTML = eq;
// console.log(eq);
// 定义函数,当按钮按下是执行一次
function xun() {
// console.log(num1, num2);
// 题号加1
i++;
// 获取用户输入的结果
var input = Number(document.getElementById("input").value);
// console.log(input, num1, num2);
// 如果是加法
if (sign_operation == 0) {
// 定义真实结果
var calResult = num1 + num2;
// 如果用户输入的结果和真实结果相同
if (input == calResult) {
// 分数加10分
score += 10;
// console.log("正确!");
// 显示正确信息
document.getElementById("result").innerHTML = "正确";
// 正确的次数加1
right_times++;
}
// 如果用户输入的结果和真实结果不同
if (input != calResult) {
// 分数减10分
score -= 10;
// console.log("错误!");
// 显示错误信息
document.getElementById("result").innerHTML = "错误";
}
} // 如果是减法
if (sign_operation == 1) {
// 定义真实结果
var calResult = num1 - num2;
// 如果用户输入的结果和真实结果相同
if (input == calResult) {
// 分数加10分
score += 10;
// console.log("正确!");
// 显示正确信息
document.getElementById("result").innerHTML = "正确";
// 正确的次数加1
right_times++;
}
// 如果用户输入的结果和真实结果不同
if (input != calResult) {
// 分数减10分
score -= 10;
// console.log("错误!");
// 显示错误信息
document.getElementById("result").innerHTML = "错误";
}
}
// 判断结果后,用户输入框清空
document.getElementById("input").value = "";
// 显示分数
document.getElementById("score").innerHTML = score;
// 显示正确率
document.getElementById("accuracy").innerHTML = (((right_times / i) * 100).toFixed(2)) + "%";
// 生成0或者1的随机数,确定加减法
sign_operation = Math.floor((Math.random() * (1 - 0 + 1)) + 0);
// 显示题号
document.getElementById("output").innerHTML = "第" + (i + 1) + "题";
// 如果是减法
if (sign_operation == 1) {
// 则被减数应该小于减数,结果才不会为负数
// 减数范围为0-200
num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
// 被减数范围为0-减数
num2 = Math.floor(Math.random() * (num1 - 0 + 1) + 0);
}
// 如果是加法
if (sign_operation == 0) {
// 两数和应小于200
// 第一个数的范围是0-200
num1 = Math.floor(Math.random() * (200 - 0 + 1) + 0);
// 第二个数是0-(200-第一个数)
num2 = Math.floor(Math.random() * (200 - num1 - 0 + 1) + 0);
}
// 组成算式,显示给用户看
eq = String(num1) + sign_operation_list[sign_operation] + String(num2) + "=";
// 页面中显示算式
document.getElementById("eq").innerHTML = eq;
// console.log(eq);
}
</script>
</body>
</html>