用 js写通过弹窗分别输入学生姓名和两门成绩( 网页设计基础和网页设计高级),在浏览器页面输出“ xxx, 网页设计基础: xx分, 网页设计高级: xx分, 总分: xx分”,总分的字体颜色为蓝色
时间: 2024-12-20 07:28:25 浏览: 7
在JavaScript中,你可以创建一个简单的HTML表单,并利用`window.prompt`函数来获取用户输入,然后将结果显示在页面上。下面是一个示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>学生分数输入</title>
<style>
.total-score {
color: blue;
}
</style>
</head>
<body>
<h2 id="result"></h2>
<script>
// 获取学生的姓名和分数
function getUserInput() {
var name = window.prompt("请输入学生姓名:");
var baseScore = parseInt(window.prompt("请输入网页设计基础成绩(整数):"));
var advancedScore = parseInt(window.prompt("请输入网页设计高级成绩(整数):"));
// 计算总分并显示结果
var totalScore = baseScore + advancedScore;
document.getElementById('result').innerText = `${name}, 网页设计基础:${baseScore}分, 网页设计高级:${advancedScore}分, 总分:${totalScore}分`;
}
// 弹出提示框并获取数据
getUserInput();
</script>
</body>
</html>
```
在这个例子中,当用户点击"确定"按钮时,会弹出三次提示框,分别询问学生姓名、网页设计基础和高级的成绩。获取到数据后,会在页面上显示相应的信息,其中总分部分使用了CSS样式使其字体颜色变为蓝色。
阅读全文