给我写个页面,要求生成100以内的加减法,提供给用户,由用户输入答案,系统判断,并且在页面内记录答题情况,记一列数据,题目内容,正确答案 我的答案,判断结果。不要用ajex语法,给我些简单点
时间: 2024-05-16 16:14:36 浏览: 8
好的,以下是一个简单的实现:
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>100以内加减法测试</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>100以内加减法测试</h1>
<p>请回答以下问题:</p>
<div id="questions"></div>
<p>您的答案:</p>
<input type="text" id="answer">
<button id="submit">提交</button>
<p>答题情况:</p>
<table id="results">
<thead>
<tr>
<th>题目内容</th>
<th>正确答案</th>
<th>我的答案</th>
<th>判断结果</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
```
JavaScript代码:
```javascript
// 生成随机的加减法题目
function generateQuestion() {
var a = Math.floor(Math.random() * 100);
var b = Math.floor(Math.random() * 100);
var operator = Math.random() < 0.5 ? '+' : '-';
var answer = eval(a + operator + b);
return a + ' ' + operator + ' ' + b + ' = ' + answer;
}
$(document).ready(function() {
var questions = [];
var results = [];
// 生成10道题目
for (var i = 0; i < 10; i++) {
var question = generateQuestion();
questions.push(question);
results.push({
question: question,
answer: eval(question.split('=')[1].trim())
});
}
// 显示题目
var $questions = $('#questions');
for (var i = 0; i < questions.length; i++) {
$questions.append('<div>' + questions[i] + '</div>');
}
// 提交答案并记录结果
$('#submit').click(function() {
var answer = $('#answer').val().trim();
if (answer === '') {
alert('请输入答案!');
return;
}
var result = results.shift();
result.myAnswer = parseInt(answer);
result.isCorrect = (result.myAnswer === result.answer);
$('#results tbody').append('<tr>' +
'<td>' + result.question + '</td>' +
'<td>' + result.answer + '</td>' +
'<td>' + result.myAnswer + '</td>' +
'<td>' + (result.isCorrect ? '正确' : '错误') + '</td>' +
'</tr>');
if (results.length === 0) {
alert('答题完毕!');
} else {
$('#questions div:first-child').remove();
$('#answer').val('');
$('#questions div:first-child').addClass('current');
}
});
// 记录第一题为当前题目
$('#questions div:first-child').addClass('current');
});
```
相关推荐
![xls](https://img-home.csdnimg.cn/images/20210720083658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)