03-JavaScript 条件语句 if else, switch

运算符：

加减乘除求余数：+ - * / %

赋值运算符：= += -= *= /= %=

条件运算符：== === > >= < <= != &&(而且) ||(或者) !(否，相当于python的not)

一个简单的条件判断语句：

    <script>
        var iNum01 = 12;
        var iNum02 = 24;

        if(iNum01>iNum02){
            alert("大于")
        }
        else{
            alert("不大于")
        }
    </script>

加法运算：parseInt可以将字符串转成数字类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加法运算</title>
    
    <script>
        window.onload = function(){
            
            var oInp1 = document.getElementById("input1");
            var oInp2 = document.getElementById("input2");
            var oBtn = document.getElementById("btn");

            oBtn.onclick = function(){
                var a = parseInt(oInp1.value);
                var b = parseInt(oInp2.value);

                alert (a+b);
            }

        }

    </script>

</head>
<body>

    <input type="text" id="input1">+
    <input type="text" id="input2">
    <input type="button" id="btn" value="add">

</body>
</html>

== and ===：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件运算</title>
    <script>
        var iNum01 = 2;
        var sNum01 = "2";
        /*
        用“==”会弹出相等，因为==会将两边的内容做一个类型转换
        if(iNum01==sNum01){
            alert("相等");
        }
        else{
            alert("不相等");
        }
        */

        // 用===会先判断两边的类型，如果类型不一样就不相等
        if(iNum01===sNum01){
            alert("相等")
        }
        else{
            alert("不相等")
        }
    </script> 
</head>
<body>
    
</body>
</html>


按钮切换元素显示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮切换元素显示</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn01");
            var oDiv = document.getElementById("box01");

            oBtn.onclick = function(){
                // 读取的是行间样式中的display属性，由于行间样式没有写，第一次默认值为空，空等于“none”
                if(oDiv.style.display == "block" || oDiv.style.display ==""){
                oDiv.style.display = 'none';
                }
                else{
                oDiv.style.display="block"
                }
            }
        }
    </script>
    <style>
        .box{
            width:200px;
            height:400px;
            background-color:gold;
        }
    </style>
</head>
<body>
    <input type="button" value="切换" id="btn01">
    <div class="box" id="box01"></div>
</body>
</html>

多重if else语句：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多重条件语句</title>
    <script>
        window.onload = function(){
        var iWeek = 5;
        var oBody = document.getElementById("body01");

        if(iWeek==1){
            oBody.style.backgroundColor="gold";
        }
        else if(iWeek==2){
            oBody.style.backgroundColor="green";
        }
        else if(iWeek==3){
            oBody.style.backgroundColor="red";
        }
        else if(iWeek==4){
            oBody.style.backgroundColor="yellow";
        }
        else if(iWeek==5){
            oBody.style.backgroundColor="lightblue";
        }
        else{
            oBody.style.backgroundColor="pink";
        }

    }

    </script>
</head>
<body id="body01">
    
</body>
</html>

switch语句
多重if else语句可以换成性能更高的switch语句：

var iNow = 1;

switch(iNow){
    case 1:
        ...;
        break;

    case 2:
        ...;
        break;

    default:
        ...;
}

上面的例子换成switch：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多重条件语句</title>
    <script>
        window.onload = function(){
        var iWeek = 5;
        var oBody = document.getElementById("body01");

        switch(iWeek){
            case 1:
            oBody.style.backgroundColor="gold";
            break;

            case 2:
            oBody.style.backgroundColor="green";
            break;

            case 3:
            oBody.style.backgroundColor="red";
            break;

            case 4:
            oBody.style.backgroundColor="yellow";
            break;

            case 5:
            oBody.style.backgroundColor="lightblue";
            break;

            // 上面的条件都不满足时：
            default:
            oBody.style.backgroundColor="pink";
        }

    }

    </script>
</head>
<body id="body01">
    
</body>
</html>

posted @ 2019-03-17 23:33 greenfan 阅读(98) 评论(0) 收藏举报

刷新页面返回顶部

greenfan

03-JavaScript 条件语句 if else, switch

公告