创建html文件,使用prompt方法,输入姓名各课程成绩,计算出总分,平均分,平均分保留两位小数,要求网页弹窗
时间: 2024-09-19 22:12:29 浏览: 41
创建HTML文件并结合JavaScript来实现这个功能,可以按照以下步骤操作:
1. 首先,在HTML中创建一个简单的表单结构,包含姓名和各科成绩的输入字段,以及提交按钮。示例代码如下:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>成绩计算器</title>
</head>
<body>
<h2>请输入您的信息:</h2>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="scores">请输入各门课的成绩 (用逗号分隔):</label>
<input type="text" id="scores" name="scores"><br><br>
<button onclick="calculate()">计算</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
```
2. 在`script.js`文件中编写JavaScript函数,用于处理用户输入、计算总分、平均分,并显示在页面上:
```javascript
function calculate() {
// 获取表单输入
const name = document.getElementById("name").value;
const scoresInput = document.getElementById("scores").value.split(",");
let totalScore = 0;
for (let i = 0; i < scoresInput.length; i++) {
totalScore += Number(scoresInput[i]);
}
// 计算平均分(四舍五入到两位小数)
const averageScore = (totalScore / scoresInput.length).toFixed(2);
// 显示结果
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `姓名: ${name}<br>总分: ${totalScore}<br>平均分: ${averageScore}`;
}
```
当你点击“计算”按钮时,这个脚本会被触发,然后会显示输入姓名和成绩后的计算结果在一个弹窗中。如果需要实际的弹窗效果,可以在浏览器环境中运行这段HTML代码,或者使用更现代的前端框架如Bootstrap、Vue.js或React.js配合模态框组件来增强用户体验。