js用input让用户不断的录入成绩,并且把所有成绩总分、平均分显示在页面上
时间: 2024-03-02 08:52:19 浏览: 138
JAVA 输入学生成绩后总成绩排序输出
好的,可以使用以下代码实现:
首先,在 HTML 中添加一个输入框和按钮,用于录入成绩和计算总分和平均分:
```html
<input type="text" id="score" placeholder="请输入成绩">
<button onclick="addScore()">添加成绩</button>
<p>总分:<span id="total"></span></p>
<p>平均分:<span id="average"></span></p>
```
然后,在 JavaScript 中编写 `addScore()` 函数,用于将输入框中的成绩添加到总分中,并更新平均分:
```javascript
let totalScore = 0; // 总分
let count = 0; // 成绩数量
function addScore() {
const scoreInput = document.getElementById("score");
const score = parseFloat(scoreInput.value); // 将输入框中的成绩转换为数字
if (!isNaN(score)) { // 判断输入是否为数字
totalScore += score; // 将成绩加入总分
count++; // 成绩数量加 1
// 更新总分和平均分的显示
const totalSpan = document.getElementById("total");
const averageSpan = document.getElementById("average");
totalSpan.innerText = totalScore.toFixed(2);
averageSpan.innerText = (totalScore / count).toFixed(2);
scoreInput.value = ""; // 清空输入框
}
}
```
以上代码会将输入框中的成绩转换为数字,判断是否为数字后将其加入总分中,并更新总分和平均分的显示。注意,代码中的 `toFixed(2)` 用于保留小数点后两位。
阅读全文