除了这个方法还有其他的jquery写的吗
时间: 2024-01-26 18:04:52 浏览: 25
当然可以,还有很多其他的方法可以使用jquery实现上述功能。以下是另一种实现方式:
```html
<!DOCTYPE html>
<html>
<head>
<title>成绩判断</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
body {
background-color: white;
}
.gray {
background-color: gray;
}
.blue {
background-color: #87CEFA;
}
.yellow {
background-color: #FFFFE0;
}
.red {
background-color: #FFC0CB;
}
</style>
</head>
<body>
<p>请输入三科成绩:</p>
<input id="score1" type="number" placeholder="第一科成绩">
<input id="score2" type="number" placeholder="第二科成绩">
<input id="score3" type="number" placeholder="第三科成绩">
<button id="submit">提交</button>
<script type="text/javascript">
$(document).ready(function() {
$("#submit").click(function() {
var score1 = parseInt($("#score1").val());
var score2 = parseInt($("#score2").val());
var score3 = parseInt($("#score3").val());
if (score1 < 60 && score2 < 60 && score3 < 60) {
$("body").removeClass().addClass("gray");
alert("请努力吧");
} else if ((score1 < 60 && score2 >= 60 && score3 >= 60) || (score1 >= 60 && score2 < 60 && score3 >= 60) || (score1 >= 60 && score2 >= 60 && score3 < 60)) {
$("body").removeClass().addClass("blue");
alert("还需努力");
} else if (score1 >= 60 && score2 >= 60 && score3 >= 60 && (score1 < 85 || score2 < 85 || score3 < 85)) {
$("body").removeClass().addClass("yellow");
alert("马马虎虎");
} else {
$("body").removeClass().addClass("red");
alert("你成绩优异");
}
});
});
</script>
</body>
</html>
```
在这个代码中,我们定义了四个类名,分别对应了不同的背景色。当点击提交按钮时,我们使用jquery根据成绩的情况,移除当前body元素的所有类名,并添加对应的类名,从而改变网页的背景色。
相关推荐
![](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)