js用input让用户不断的录入成绩,并且把所有成、平均分显示在页面上。绩的信息和总和
时间: 2024-03-01 21:55:12 浏览: 24
好的,我可以帮你解答这个问题。
首先,你需要在页面上创建一个输入框和一个按钮,用于录入成绩,以及一个显示区域,用于显示所有成绩和平均分。可以使用 HTML 和 JavaScript 实现它们。以下是一个简单的示例:
```html
<label>成绩:</label>
<input type="number" id="score">
<button onclick="addScore()">添加</button>
<div id="result"></div>
```
接下来,你需要编写 JavaScript 代码来实现添加成绩和计算平均分的功能。以下是一个示例:
```javascript
// 定义一个数组,用于存储所有成绩
var scores = [];
// 获取输入框和显示区域的 DOM 元素
var scoreInput = document.getElementById("score");
var resultDiv = document.getElementById("result");
// 定义一个函数,用于添加成绩
function addScore() {
// 获取输入框中的成绩
var score = parseInt(scoreInput.value);
// 将成绩添加到数组中
scores.push(score);
// 计算总分和平均分
var total = 0;
for (var i = 0; i < scores.length; i++) {
total += scores[i];
}
var average = total / scores.length;
// 将成绩和平均分显示在页面上
resultDiv.innerHTML = "成绩:" + scores.join(", ") + "<br>总分:" + total + "<br>平均分:" + average.toFixed(2);
// 清空输入框的值
scoreInput.value = "";
}
```
解释一下上面的代码:
- 首先,我们定义了一个数组 `scores`,用于存储所有成绩。
- 然后,我们获取输入框和显示区域的 DOM 元素。
- 接着,我们定义了一个函数 `addScore()`,用于添加成绩。在函数中,我们首先获取输入框中的成绩,然后将其添加到数组中。接着,我们使用一个循环计算总分,并且计算平均分。最后,我们将成绩和平均分显示在页面上,并且清空输入框的值。
你可以将上面的代码复制到一个 HTML 文件中,然后在浏览器中打开它,就可以看到一个可用的成绩录入和计算平均分的页面了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)