JS学习（四）-条件语句

最新推荐文章于 2024-09-11 08:27:52 发布

在下平兄

最新推荐文章于 2024-09-11 08:27:52 发布

阅读量117

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_44494778/article/details/99727865

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

运算符

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

if else

var iNum01 = 3;
var iNum02 = 5;
var sTr;
if(iNum01>iNum02){
    sTr = '大于';
}
else
{
    sTr = '小于';
}
alert(sTr);

理解练习

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oBox = document.getElementById("box");
            oBtn.onclick = function () {
                // oBox.style.display 是读取的标签里写的display属性值，如果没有写，这个值为空
                if(oBox.style.display == "block"||oBox.style.display=='')
                {
                    oBox.style.display = "none";
                }
                else
                {
                    oBox.style.display = "block";
                }
            }
        }
    </script>

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
<input type="button" name="" value="隐藏" id="btn">
<div id="box"></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:
        ...;
}

理解练习

周一至周五不同背景色

<script>
        window.onload = function () {
            var oBody = document.getElementById("body01");
            var iWeek = 7;
            switch (iWeek) {
                case 1:
                    oBody.style.backgroundColor = "black";
                    break;
                case 2:
                    oBody.style.backgroundColor = "green";
                    break;
                case 3:
                    oBody.style.backgroundColor = "red";
                    break;
                case 4:
                    oBody.style.backgroundColor = "pink";
                    break;
                case 5:
                    oBody.style.backgroundColor = "blue";
                    break;
                default:
                    oBody.style.backgroundColor = "yellow";
            }
        }
</script>