用html算出5门成绩的平均分,总分,最高分,最低分
时间: 2024-09-28 21:05:24 浏览: 34
在HTML中,你可以创建一个简单的表单让用户输入五门课程的成绩,然后通过JavaScript来计算平均分、总分、最高分和最低分。以下是一个基本示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>成绩计算器</title>
</head>
<body>
<h2>请输入五门课的成绩:</h2>
<input type="number" id="score1" placeholder="第一门成绩"><br>
<input type="number" id="score2" placeholder="第二门成绩"><br>
<input type="number" id="score3" placeholder="第三门成绩"><br>
<input type="number" id="score4" placeholder="第四门成绩"><br>
<input type="number" id="score5" placeholder="第五门成绩"><br>
<button onclick="calculateScores()">计算</button>
<p id="average">平均分:</p>
<p id="total">总分:</p>
<p id="max">最高分:</p>
<p id="min">最低分:</p>
<script>
function calculateScores() {
var score1 = document.getElementById('score1').value;
var score2 = document.getElementById('score2').value;
var score3 = document.getElementById('score3').value;
var score4 = document.getElementById('score4').value;
var score5 = document.getElementById('score5').value;
if (isNaN(score1) || isNaN(score2) || isNaN(score3) || isNaN(score4) || isNaN(score5)) {
alert("请输入数字!");
return;
}
var total = Number(score1) + Number(score2) + Number(score3) + Number(score4) + Number(score5);
var average = total / 5;
var maxScore = Math.max(score1, score2, score3, score4, score5);
var minScore = Math.min(score1, score2, score3, score4, score5);
document.getElementById('average').innerText = "平均分: " + average.toFixed(2);
document.getElementById('total').innerText = "总分: " + total;
document.getElementById('max').innerText = "最高分: " + maxScore;
document.getElementById('min').innerText = "最低分: " + minScore;
}
</script>
</body>
</html>
```
这个示例中,用户输入成绩后点击“计算”按钮,JavaScript会获取输入的值并进行计算,结果将显示在相应的段落元素中。
阅读全文