在html运行的 先在html创建第几次和得分的文本框 然后将function handIn() { var total = 0; //遍历答题卡和答案 for (var i = 0; i < answers.length; i++) { if (answers[i].toLowerCase() === keys[i]) { total = total + Number(p[i].score); } }} alert('你的得分是:' + total);的total储存到localStorage的一个数组,并点击一个查询,分别将total的第几次显示到第几次的文本框和把total显示到得分的文本框的html和js代码
时间: 2024-03-20 22:45:20 浏览: 41
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>考试成绩</title>
</head>
<body>
<h1>考试成绩</h1>
<p>第几次考试:<input type="text" id="examNo"></p>
<p>得分:<input type="text" id="score"></p>
<button onclick="showScore()">查询</button>
<script src="exam.js"></script>
</body>
</html>
```
JS代码:
```
// 定义localStorage数组
var scores = [];
function handIn() {
var total = 0;
// 遍历答题卡和答案
for (var i = 0; i < answers.length; i++) {
if (answers[i].toLowerCase() === keys[i]) {
total = total + Number(p[i].score);
}
}
// 将得分存储到localStorage的数组中
scores.push(total);
localStorage.setItem('scores', JSON.stringify(scores));
alert('你的得分是:' + total);
}
function showScore() {
// 获取输入的考试次数
var examNo = document.getElementById('examNo').value;
// 获取指定考试次数的得分
var score = scores[examNo - 1];
// 将得分显示到得分文本框中
document.getElementById('score').value = score;
}
```
解释:
1. 首先,我们在HTML中添加了两个文本框,一个用于输入考试次数,一个用于显示得分。还有一个查询按钮,点击该按钮可以查询指定考试次数的得分。
2. 在JS代码中,我们定义了一个localStorage数组,用于存储所有考试的得分。在`handIn()`函数中,我们计算得分后,将得分存储到数组中,并将数组存储到localStorage中。在`showScore()`函数中,我们首先获取用户输入的考试次数,然后从localStorage中获取该次考试的得分,并将得分显示到得分文本框中。
3. 注意,我们使用了`JSON.stringify()`将数组转换为JSON字符串进行存储,这是因为localStorage只能存储字符串类型的数据。在获取数据时,我们还需要使用`JSON.parse()`将字符串转换为数组。