用web前端把百分制成绩转换成等级制输出,并在浏览器中显示下图所示的样式。 优秀:90<=score<=100良好:80<=score<=89中等:70<=score<=79及格:60<=score<=69不及格:0<=score<=59
时间: 2024-10-16 08:02:07 浏览: 27
要在Web前端将百分制成绩转换成等级并显示特定的样式,你可以创建一个简单的HTML结构,结合JavaScript处理输入分数并应用CSS样式。这里是一个简单的示例:
1. HTML部分:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.grade {
display: inline-block;
margin-right: 10px;
padding: 5px;
border: 1px solid #ccc;
font-size: 14px;
text-align: center;
}
.excellent { background-color: lightgreen; color: black; }
.good { background-color: yellow; color: black; }
.average { background-color: orange; color: white; }
.pass { background-color: lightblue; color: black; }
.fail { background-color: red; color: white; }
</style>
</head>
<body>
<label for="score">请输入成绩:</label>
<input type="number" id="score" min="0" max="100">
<button onclick="convertGrade()">转换等级</button>
<p id="result"></p>
</body>
</html>
```
2. JavaScript部分 (放在 `<script>` 标签内):
```javascript
function convertGrade() {
var scoreInput = document.getElementById('score');
var resultElement = document.getElementById('result');
var score = parseInt(scoreInput.value);
if (score >= 90) {
resultElement.textContent = '优秀';
resultElement.className = 'excellent';
} else if (score >= 80) {
resultElement.textContent = '良好';
resultElement.className = 'good';
} else if (score >= 70) {
resultElement.textContent = '中等';
resultElement.className = 'average';
} else if (score >= 60) {
resultElement.textContent = '及格';
resultElement.className = 'pass';
} else {
resultElement.textContent = '不及格';
resultElement.className = 'fail';
}
}
```
现在,当你在输入框中输入分数并点击按钮时,等级和相应的样式就会实时更新在页面上。
阅读全文