Spaces:
Sleeping
Sleeping
| <!-- /* | |
| * @Author: Chauncey Yuan | |
| * @Date: 2019-08-01 18:25:30 | |
| * @Last Modified by: Chauncey Yuan | |
| * @Last Modified time: 2019-08-03 08:24:27 | |
| */ --> | |
| <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> | |
| html { | |
| height: 100%; | |
| background: #b3b4a6; | |
| } | |
| .cal_game { | |
| width: 100vw; | |
| margin: 0 auto; | |
| } | |
| table { | |
| margin: 0 auto; | |
| } | |
| td { | |
| width: 150px; | |
| height: 50px; | |
| text-align: center; | |
| line-height: 40px; | |
| border: 1px solid #2b7e71; | |
| } | |
| /* .btn { | |
| width: 150px; | |
| height: 50px; | |
| color: #2b7e71;; | |
| border: 1px solid #2b7e71; | |
| background-color: transparent; | |
| } | |
| .btn:hover { | |
| background-color: #2b7e71; | |
| color: #fff; | |
| cursor: pointer; | |
| } */ | |
| input { | |
| height: 30px; | |
| border: 1px solid #999999; | |
| background-color: transparent; | |
| } | |
| input:hover { | |
| border: 3px solid #314834; | |
| } | |
| </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 colspan="2"><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); | |
| var max_num = 20; | |
| // 显示题号 | |
| document.getElementById("output").innerHTML = "第" + (i + 1) + "题"; | |
| document.onkeydown = function (e) { | |
| if(e.which == "13" && document.getElementById("input").value){ | |
| xun() | |
| } | |
| else{ | |
| document.getElementById("input").focus() | |
| } | |
| } | |
| // 如果是减法 | |
| if (sign_operation == 1) { | |
| // 则被减数应该小于减数，结果才不会为负数 | |
| // 减数范围为0-max_num | |
| var num1 = Math.floor(Math.random() * (max_num - 0 + 1) + 0); | |
| // 被减数范围为0-减数 | |
| var num2 = Math.floor(Math.random() * (num1 - 0 + 1) + 0); | |
| } | |
| // 如果是加法 | |
| if (sign_operation == 0) { | |
| // 两数和应小于max_num | |
| // 第一个数的范围是0-max_num | |
| var num1 = Math.floor(Math.random() * (max_num - 0 + 1) + 0); | |
| // 第二个数是0-（max_num-第一个数） | |
| var num2 = Math.floor(Math.random() * (max_num - 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)) + "%"; | |
| if (score >= 100) { | |
| window.location.href = "game.html"; | |
| } | |
| // 生成0或者1的随机数，确定加减法 | |
| sign_operation = Math.floor((Math.random() * (1 - 0 + 1)) + 0); | |
| // 显示题号 | |
| document.getElementById("output").innerHTML = "第" + (i + 1) + "题"; | |
| // 如果是减法 | |
| if (sign_operation == 1) { | |
| // 则被减数应该小于减数，结果才不会为负数 | |
| // 减数范围为0-max_num | |
| num1 = Math.floor(Math.random() * (max_num - 0 + 1) + 0); | |
| // 被减数范围为0-减数 | |
| num2 = Math.floor(Math.random() * (num1 - 0 + 1) + 0); | |
| } | |
| // 如果是加法 | |
| if (sign_operation == 0) { | |
| // 两数和应小于max_num | |
| // 第一个数的范围是0-max_num | |
| num1 = Math.floor(Math.random() * (max_num - 0 + 1) + 0); | |
| // 第二个数是0-（max_num-第一个数） | |
| num2 = Math.floor(Math.random() * (max_num - 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> | |