用数组实现接收用户输入的9门课的成绩,然后再页面上显示总分和平均分,并显示低于60分的成绩全过程html
时间: 2024-06-10 19:06:24 浏览: 8
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>成绩统计</title>
</head>
<body>
<h1>成绩统计</h1>
<form>
<label for="chinese">语文成绩:</label>
<input type="text" id="chinese" name="grades[]"><br>
<label for="math">数学成绩:</label>
<input type="text" id="math" name="grades[]"><br>
<label for="english">英语成绩:</label>
<input type="text" id="english" name="grades[]"><br>
<label for="physics">物理成绩:</label>
<input type="text" id="physics" name="grades[]"><br>
<label for="chemistry">化学成绩:</label>
<input type="text" id="chemistry" name="grades[]"><br>
<label for="biology">生物成绩:</label>
<input type="text" id="biology" name="grades[]"><br>
<label for="history">历史成绩:</label>
<input type="text" id="history" name="grades[]"><br>
<label for="geography">地理成绩:</label>
<input type="text" id="geography" name="grades[]"><br>
<label for="politics">政治成绩:</label>
<input type="text" id="politics" name="grades[]"><br>
<input type="submit" value="提交">
</form>
<hr>
<h2>成绩汇总</h2>
<p>总分为:<span id="total"></span></p>
<p>平均分为:<span id="average"></span></p>
<p>低于60分的成绩为:<span id="lower"></span></p>
<script>
const form = document.querySelector('form');
const totalElement = document.querySelector('#total');
const averageElement = document.querySelector('#average');
const lowerElement = document.querySelector('#lower');
form.addEventListener('submit', (event) => {
event.preventDefault();
const grades = Array.from(new FormData(event.target).getAll('grades[]', 0));
let total = 0;
let lowerGrades = [];
grades.forEach((grade) => {
total += Number(grade);
if (Number(grade) < 60) {
lowerGrades.push(Number(grade));
}
});
const average = total / grades.length;
totalElement.textContent = total;
averageElement.textContent = average.toFixed(2);
lowerElement.textContent = lowerGrades.join(', ');
});
</script>
</body>
</html>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![cpp](https://img-home.csdnimg.cn/images/20210720083646.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)