要求 (1)创建网页并编写HTML基本结构(1分) (2)提示用户输入7个学生成绩,保存在数组中(1分) (3) 计算总分井输出 (1分) (4)计算平均分并输出(1分) (5)输出有几个成绩不及格 (即<60分) (1分)
时间: 2023-06-09 16:07:56 浏览: 87
回答:
好的,我已经记录下了你的问题,并且会一步步帮你解决。
首先,为了完成要求,我们需要创建一个新的HTML文件,并编写基本的HTML结构,具体的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生成绩统计</title>
</head>
<body>
</body>
</html>
```
接下来,我们需要在HTML文件中添加一个表单,让用户可以输入7个学生成绩,并保存在一个数组中,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生成绩统计</title>
</head>
<body>
<form>
<label>请输入7个学生成绩:</label>
<br>
<input type="number" name="score1" required>
<br>
<input type="number" name="score2" required>
<br>
<input type="number" name="score3" required>
<br>
<input type="number" name="score4" required>
<br>
<input type="number" name="score5" required>
<br>
<input type="number" name="score6" required>
<br>
<input type="number" name="score7" required>
<br>
<button type="submit">提交</button>
</form>
</body>
</html>
```
然后,我们需要在JavaScript中处理表单提交事件,将输入的成绩保存在数组中,并计算总分、平均分以及不及格的人数,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生成绩统计</title>
</head>
<body>
<form onsubmit="calculateScore(event)">
<label>请输入7个学生成绩:</label>
<br>
<input type="number" name="score1" required>
<br>
<input type="number" name="score2" required>
<br>
<input type="number" name="score3" required>
<br>
<input type="number" name="score4" required>
<br>
<input type="number" name="score5" required>
<br>
<input type="number" name="score6" required>
<br>
<input type="number" name="score7" required>
<br>
<button type="submit">提交</button>
</form>
<script>
function calculateScore(event) {
event.preventDefault();
let scores = [];
let total = 0;
let count = 0;
for (let i = 1; i <= 7; i++) {
let score = parseInt(event.target.elements['score' + i].value);
scores.push(score);
total += score;
if (score < 60) {
count++;
}
}
let average = total / 7;
console.log('总分:' + total);
console.log('平均分:' + average);
console.log('不及格人数:' + count);
}
</script>
</body>
</html>
```
最后,我们可以将计算结果输出到HTML页面上,让用户看到,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生成绩统计</title>
</head>
<body>
<form onsubmit="calculateScore(event)">
<label>请输入7个学生成绩:</label>
<br>
<input type="number" name="score1" required>
<br>
<input type="number" name="score2" required>
<br>
<input type="number" name="score3" required>
<br>
<input type="number" name="score4" required>
<br>
<input type="number" name="score5" required>
<br>
<input type="number" name="score6" required>
<br>
<input type="number" name="score7" required>
<br>
<button type="submit">提交</button>
</form>
<div id="result"></div>
<script>
function calculateScore(event) {
event.preventDefault();
let scores = [];
let total = 0;
let count = 0;
for (let i = 1; i <= 7; i++) {
let score = parseInt(event.target.elements['score' + i].value);
scores.push(score);
total += score;
if (score < 60) {
count++;
}
}
let average = total / 7;
let result = document.getElementById('result');
result.innerHTML = '总分:' + total + '<br>平均分:' + average + '<br>不及格人数:' + count;
}
</script>
</body>
</html>
```
以上就是完成要求的完整代码。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.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)