JavaScript 条件语句 - if else - switch

条件语句

通过条件来控制程序的走向，就需要用到条件语句。

运算符

1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余) 2、赋值运算符：=、 +=、 -=、 *=、 /=、 %= 3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

if else

使用 -=写一个减法功能，同时需要判断输入每个文本框的数值大小。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">

        window.onload = function(){
            
            var oInput1 = document.getElementById('num1');
            var oInput2 = document.getElementById('num2');
            var oBtn1 = document.getElementById('sub');
            var oSpan = document.getElementById('result');

            oBtn1.onclick = function(){

                console.log(oInput1.value);
                console.log(oInput2.value);

                var num1 = parseInt(oInput1.value);
                var num2 = parseInt(oInput2.value);
                
                if (num1 >= num2) {
                    num1 -= num2
                    oSpan.innerHTML = num1;
                }else{
                    oSpan.innerHTML = "输入的num1小于num2，无法计算";
                }
                
            }

        }

    </script>
</head>
<body>
    <input type="text" name="" id="num1">
    <input type="text" name="" id="num2">
    <input type="button" name="" value="-=" id="sub">
    <div>结果：<span id="result"></span></div>
</body>
</html>

理解练习

制作单个按钮点击切换元素的显示和隐藏效果。

实现方式：主要通过判断元素的display的值，如果是block则是块元素，当时就是显示。如果是none，则元素会隐藏。

那么下面使用if else来实现一下。

可以看到，当点击切换按钮的时候，div的样式设置为display:none的时候就隐藏了。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("div1");

            oBtn.onclick = function(){

                if (oDiv.style.display == "none") {
                    oDiv.style.display = "block";
                }else{
                    oDiv.style.display = "none";
                }

            }
            
        }
    </script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: gold;
            transform: rotateZ(0deg);
            transition: all 1s ease ;
        }

        div:hover{
            transform:  rotateZ(45deg) perspective(800px);
        }
    </style>
</head>
<body>
    <input type="button" name="" value="切换" id="btn1">
    <div id="div1"></div>
</body>
</html>

多重if else语句

var iNow = 1;
if(iNow==1)
{
    ... ;
}
else if(iNow==2)
{
    ... ;
}
else
{
    ... ;
}

switch语句

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

var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}

理解练习

编写一个通过switch方法变换body颜色的示例，如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">

        window.onload = function(){
            var oBody = document.getElementsByTagName('body')[0];

            var flag = 2;

            switch(flag){
                case 1:
                    oBody.style.background = "gold";
                    break;
                case 2:
                    oBody.style.background = "cyan";
                    break;
                default:
                    oBody.style.background = "pink";
            }

        }
    </script>
</head>
<body>
</body>
</html>