用JavaScript 写一遍程序,要求如下在界面上输入成绩三门课成绩在屏幕上输出总分和对应的名字
时间: 2024-09-23 09:08:09 浏览: 25
在 JavaScript 中,你可以创建一个简单的 HTML 表单结合一些基本的 DOM 操作来实现这个功能。首先,你需要创建一个HTML结构用于输入课程名称和成绩,然后编写JavaScript代码来计算总分并显示结果。以下是示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>成绩计算器</title>
</head>
<body>
<h1>请输入课程成绩:</h1>
<label for="course1">课程一:</label>
<input type="number" id="course1" name="course1"><br>
<label for="course2">课程二:</label>
<input type="number" id="course2" name="course2"><br>
<label for="course3">课程三:</label>
<input type="number" id="course3" name="course3"><br>
<button onclick="calculateTotal()">计算总分</button>
<p id="result"></p>
<script>
function calculateTotal() {
// 获取各门课程的成绩
var course1 = parseInt(document.getElementById("course1").value);
var course2 = parseInt(document.getElementById("course2").value);
var course3 = parseInt(document.getElementById("course3").value);
// 计算总分
var totalScore = course1 + course2 + course3;
// 创建一个对象来存储课程名和对应的分数
var courses = {
"课程一": course1,
"课程二": course2,
"课程三": course3
};
// 显示结果
var resultElement = document.getElementById("result");
resultElement.innerHTML = `总分: ${totalScore} 分\n`;
// 遍历课程数组,展示每门课程的分数及其名字
for (var course in courses) {
resultElement.innerHTML += `${course}: ${courses[course]} 分<br>`;
}
}
</script>
</body>
</html>
```
在这个例子中,用户可以在输入框中输入三门课程的成绩,点击“计算总分”按钮后,会触发`calculateTotal`函数,计算总分并在页面上显示出每门课程的分数。
阅读全文