用javascript实现成绩统计
时间: 2023-11-29 22:04:47 浏览: 82
以下是一个简单的JavaScript成绩统计程序,可以统计学生的总成绩、平均成绩、最高分和最低分。
```html
<!DOCTYPE html>
<html>
<head>
<title>成绩统计</title>
</head>
<body>
<h2>请输入学生成绩</h2>
<input type="text" id="score">
<button onclick="addScore()">添加</button>
<hr>
<h2>成绩列表</h2>
<ul id="scoreList"></ul>
<hr>
<h2>统计结果</h2>
<p>总成绩:<span id="totalScore">0</span></p>
<p>平均成绩:<span id="averageScore">0</span></p>
<p>最高分:<span id="maxScore">0</span></p>
<p>最低分:<span id="minScore">0</span></p>
<script>
// 定义一个数组,用于存储学生成绩
var scores = [];
// 添加成绩的函数
function addScore() {
// 获取输入框中的成绩
var score = parseFloat(document.getElementById("score").value);
// 判断输入是否合法
if (isNaN(score) || score < 0 || score > 100) {
alert("成绩输入有误,请重新输入!");
return;
}
// 将成绩加入数组
scores.push(score);
// 更新成绩列表
updateScoreList();
// 更新统计结果
updateStatistics();
}
// 更新成绩列表的函数
function updateScoreList() {
var scoreList = document.getElementById("scoreList");
scoreList.innerHTML = "";
for (var i = 0; i < scores.length; i++) {
var li = document.createElement("li");
li.innerText = scores[i];
scoreList.appendChild(li);
}
}
// 更新统计结果的函数
function updateStatistics() {
var totalScore = 0;
var maxScore = 0;
var minScore = 100;
for (var i = 0; i < scores.length; i++) {
totalScore += scores[i];
if (scores[i] > maxScore) {
maxScore = scores[i];
}
if (scores[i] < minScore) {
minScore = scores[i];
}
}
var averageScore = totalScore / scores.length;
document.getElementById("totalScore").innerText = totalScore;
document.getElementById("averageScore").innerText = averageScore.toFixed(2);
document.getElementById("maxScore").innerText = maxScore;
document.getElementById("minScore").innerText = minScore;
}
</script>
</body>
</html>
```
该程序的界面包括一个输入框和一个按钮,用于添加成绩;一个成绩列表,用于显示已添加的成绩;一个统计结果区域,用于显示总成绩、平均成绩、最高分和最低分。程序的核心是三个函数:`addScore()`、`updateScoreList()`和`updateStatistics()`。`addScore()`函数用于添加成绩,将输入框中的成绩加入数组并更新成绩列表和统计结果;`updateScoreList()`函数用于更新成绩列表,将数组中的成绩逐个添加到列表中;`updateStatistics()`函数用于更新统计结果,计算总成绩、平均成绩、最高分和最低分,并将结果显示在页面上。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)