• 欢迎光临~

JavaScript学习4

开发技术 开发技术 2022-06-21 次浏览

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。

程序员灯塔
转载请注明原文链接:JavaScript学习4
喜欢 (0)