javascript-分支与循环-摩杜云开发者社区

分支语句

if(条件){
成立时的代码
}
else{
条件不成立时的代码
}

多路分支

if(条件1){条件成立时代码}
else if(条件2){条件2成立时的代码}
else if(条件3){条件3成立时的代码}
else{其它情况时的代码}

对比一下python中的多路分支

name = 'zs'

if name == None:
    pass
elif name == "zs":
    pass
else:
    pass

开关练习

点开按钮，控制div盒子的显示与隐藏

javascript-分支与循环

switch语句

switch（条件）{
case m:
    条件值为m时执行的代码;
    break;
case n:
    条件值为n时执行的代码;
    break;
default:
    条件都不成立时的默认执行代码;
}

变色练习

有一个输入框和提交框

输入1-3的数据

提交

不同数值会对应上不同的背景颜色

开关练习，代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload = function () {
            // 获取按钮对象
            var oBtn = document.getElementById("btn")
            // 按钮对象的点击事件
            oBtn.onclick = hide_show
        }

        function hide_show() {
            // alert('..')
        // 点击事件的详情
        // 获取DIV标签的style对象
            var oDiv1 = document.getElementById("div1")
            var oDivStyle = oDiv1.style
            alert(oDivStyle.display)
        // 拿style对象的display属性值
        //     alert(oDivStyle.display)
            if(oDivStyle.display == "block" || oDivStyle.display ==""){
                oDivStyle.display = "none"
                // 样式对象.属性=值
            }else{
                oDivStyle.display = "block"
            }
        // 如果display的值是block，那么让它变为none
        // 否则让它变为block

        }


    </script>

    <style>
        div{
            width: 300px;
            height: 200px;
            background: red;
        }

    </style>
</head>
<body>


<input type="button" value="开/关" id="btn">
<div id="div1"></div>
</body>
</html>

背景变色，代码

<script>

    window.onload = function () {
        var oBtn = document.getElementById("btn")
        oBtn.onclick = function () {
            var oTxt = document.getElementById("txt")
            var sValue = oTxt.value
            var oBd = document.getElementById("bd")

            switch (sValue) {
                case "1":
                    oBd.style.backgroundColor = "red";
                    break;
                case "2":
                    oBd.style.backgroundColor = "blue";
                    break;
                case "3":
                    oBd.style.backgroundColor = "green";
                    break;
                default:
                    oBd.style.backgroundColor = "yellow";
                    break;
            }
        }
    }

</script>


<input type="text" id="txt">
<input type="button" value="submit" id="btn">

<body id="bd">
<div>0</div>
</body>