用JavaScript实现成绩统计
时间: 2024-05-07 07:16:05 浏览: 13
以下是一个基本的JavaScript成绩统计代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>成绩统计</title>
<script>
function calculate() {
// 获取表单中的成绩数据
var score1 = parseFloat(document.getElementById("score1").value);
var score2 = parseFloat(document.getElementById("score2").value);
var score3 = parseFloat(document.getElementById("score3").value);
// 计算总分和平均分
var total = score1 + score2 + score3;
var average = total / 3;
// 显示总分和平均分
document.getElementById("total").innerHTML = total;
document.getElementById("average").innerHTML = average;
}
</script>
</head>
<body>
<h1>成绩统计</h1>
<form>
<label for="score1">科目1成绩:</label>
<input type="text" id="score1" name="score1"><br>
<label for="score2">科目2成绩:</label>
<input type="text" id="score2" name="score2"><br>
<label for="score3">科目3成绩:</label>
<input type="text" id="score3" name="score3"><br>
<button type="button" onclick="calculate()">计算</button>
</form>
<p>总分: <span id="total"></span></p>
<p>平均分: <span id="average"></span></p>
</body>
</html>
```
在这个代码示例中,我们使用了一个`calculate`函数来计算总分和平均分。该函数首先获取表单中的三个成绩数据,然后计算总分和平均分,最后将结果显示在页面上。
注意,我们使用了`parseFloat`函数来将输入框中的字符串转换为数值。这是因为表单中输入的数据默认为字符串类型,而我们需要对它们进行数学计算。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)