html网页如何在网页中根据输入的成绩给予评价
时间: 2024-02-01 08:16:59 浏览: 33
您可以通过以下步骤在HTML网页中根据输入的成绩给予评价:
1. 创建一个HTML表单,其中包含一个输入框和一个提交按钮:
```html
<form>
<label for="score">请输入成绩:</label>
<input type="text" id="score" name="score">
<button type="submit">提交</button>
</form>
```
2. 在JavaScript中获取输入框中的值,并根据成绩给出评价:
```javascript
var score = document.getElementById("score").value;
var message;
if (score >= 90) {
message = "优秀";
} else if (score >= 80) {
message = "良好";
} else if (score >= 60) {
message = "及格";
} else {
message = "不及格";
}
document.getElementById("result").innerHTML = "评价:" + message;
```
3. 在HTML中创建一个用于显示评价的元素:
```html
<div id="result"></div>
```
完整的代码如下所示:
```html
<html>
<head>
<title>成绩评价</title>
</head>
<body>
<form>
<label for="score">请输入成绩:</label>
<input type="text" id="score" name="score">
<button type="submit">提交</button>
</form>
<div id="result"></div>
<script>
var form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
var score = document.getElementById("score").value;
var message;
if (score >= 90) {
message = "优秀";
} else if (score >= 80) {
message = "良好";
} else if (score >= 60) {
message = "及格";
} else {
message = "不及格";
}
document.getElementById("result").innerHTML = "评价:" + message;
});
</script>
</body>
</html>
```
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)