1、if语句的使用：如果…否则
if(判断条件){
//当判断条件满足时，执行该处代码
}else{
//当判断条件不满足时，执行该处代码
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id='box' style="width: 200px;height: 200px;background: red;"></div>
<button id="btn">验证</button>
<script>
var box = document.getElementById('box');
var btn = document.getElementById('btn');
//if(判断条件){条件成立执行}
btn.onclick = function () {
//当宽度=200px时
if (box.style.width == '200px') {
alert("条件成立！！")
}else{
//不满足条件执行
alert("条件不成立！！")
}
}
</script>
</body>
</html>
2、多条件判断if…else if…:r如果…或者如果…否则
if(判断条件){
//当判断条件满足时，执行该处代码
}else if(判断条件){
//当判断条件满足时，执行该处代码
}else if(判断条件){
//当判断条件满足时，执行该处代码
}else{
//当判断条件不满足时，执行该处代码
}
实现一个评分系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id='score' type="text">
<button id="btn">评级</button>
<script>
var score = document.getElementById('score');
var btn = document.getElementById('btn');
btn.onclick = function () {
var scoreTxt = score.value;
if(scoreTxt >= 80){
alert('优秀！');
}else if(scoreTxt >= 70){
alert('良好！');
}else if(scoreTxt >= 60){
alert('一般！');
}else{
alert('不及格~！！')
}
}
</script>
</body>
</html>
注意事项：
1）判断条件可以有多个。
2）可以只有if没有else。
原创文章，作者：745907710，如若转载，请注明出处：https://blog.ytso.com/tech/webdev/272721.html