js系统随机生成两数相加的表达式,用户给出答案,系统判断答案是否正确。一轮答题结束后,询问是否继续,如果是,则继续进行答题,否则退出程序。程序运行后,用户根据提示输入答案,系统会给出判断,并提示是否继续。单击“确定”按钮会重新开始,单击“取消”按钮会退出程序。
时间: 2024-05-25 15:16:35 浏览: 112
以下是一个简单的实现:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>加法练习</title>
</head>
<body>
<h1>加法练习</h1>
<p id="question"></p>
<input type="number" id="answer">
<button onclick="checkAnswer()">提交答案</button>
<p id="result"></p>
<button onclick="start()">开始练习</button>
<button onclick="end()">退出程序</button>
</body>
</html>
```
JavaScript代码:
```javascript
var a, b, answer;
var questionElement = document.getElementById("question");
var answerElement = document.getElementById("answer");
var resultElement = document.getElementById("result");
function generateQuestion() {
// 生成两个随机数
a = Math.floor(Math.random() * 10);
b = Math.floor(Math.random() * 10);
// 显示问题
questionElement.innerHTML = a + " + " + b + " = ";
}
function checkAnswer() {
// 获取用户输入的答案
answer = parseInt(answerElement.value);
// 判断答案是否正确
if (answer === a + b) {
resultElement.innerHTML = "回答正确!";
} else {
resultElement.innerHTML = "回答错误!正确答案是 " + (a + b) + "。";
}
// 清空输入框
answerElement.value = "";
}
function start() {
// 生成题目
generateQuestion();
// 显示输入框和提交按钮
answerElement.style.display = "inline";
resultElement.style.display = "inline";
// 隐藏开始练习按钮
event.target.style.display = "none";
}
function end() {
if (confirm("确定要退出程序吗?")) {
window.close();
}
}
// 监听回车键,自动提交答案
answerElement.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
checkAnswer();
}
});
// 初始化界面
answerElement.style.display = "none";
resultElement.style.display = "none";
```
解释:
1. 首先定义了四个全局变量:a、b、answer分别表示两个随机数和用户输入的答案,以及三个DOM元素的引用。
2. `generateQuestion()`函数用于生成两个随机数,并将问题显示在页面上。
3. `checkAnswer()`函数用于获取用户输入的答案,判断答案是否正确,并将结果显示在页面上。
4. `start()`函数用于开始练习,它会生成题目、显示输入框和提交按钮,并隐藏开始练习按钮。
5. `end()`函数用于退出程序,它会弹出确认框,确认后关闭窗口。
6. 监听回车键,实现自动提交答案。
7. 初始化界面时,将输入框和提交结果的元素隐藏。
效果如下:
![加法练习](https://i.loli.net/2021/06/18/JZuO6X5fzlydUxP.png)
阅读全文