JS（三）分支语句

最新推荐文章于 2024-08-22 14:32:34 发布

码界索隆

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量79

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/cool66boy/article/details/123356834

版权

文章目录

条件语句
练习

条件语句

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

运算符

算术运算符：+ 、- 、* 、/（除）、%（求余）
赋值运算符：= 、+= 、-= 、/= 、%=
条件运算符：== 、===、 > 、>= 、< 、<= 、!= 、&&(而且) 、||（或者）、!(否)
注：" == "与 " === “的区别：
1.” == “会先将两边的值转换为同一类型再进行比较。
2.” === " 会先比较俩边的值是否是同一类型，是再比较值，不是则直接是不等。

if else

            // 条件判断
            var iNum01 = 2;
            var iNum02 = 4;

            if(iNum01>iNum02){
                alert("iNum01大于iNum02");
            }

            else{
                alert("iNum01不大于iNum02")
            }

多重if else

           //多重条件判断
            var sBox = document.getElementById("box");
            var iNum03 = 6;
            sBox.innerHTML = iNum03; //将6写入到id是box的盒子的内容区域

            if(iNum03<2){
                console.log("ok");
            }

            else if(iNum03>7){
                console.log("iNum03大于7");
            }

            else{
                console.log("iNum03既不小于2也不大于7");
            }

switch语句


            //用switch来实现多重判断

            switch(iNum03){

                case iNum03<2:
                    console.log("ok");
                    break;
                case iNum03>7:
                    console.log("iNum03大于7");
                    break;
                default: //都不是的情况下执行
                    console.log("iNum03既不小于2也不大于7");
                    break;
                }

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

练习

按钮切换元素显示或隐藏

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: chocolate;
        }

        #btn1{
            width: 200px;
            height: 50px; 
            font-size: 22px;
        }
    </style>
    <script>

        window.onload = function(){
            var btn1 = document.getElementById("btn1");//获取按钮对象

            var box = document.getElementById("box");//获取盒子对象
            // var box_display = box.style.display;//无法获取。不懂原理（待解决）
            //alert(box_display);//弹出undefined

            btn1.onclick = function(){
                if (box.style.display == 'none'){
                    box.style.display = 'block';
                    btn1.value = '隐藏';             //显示盒子
                }
                else{
                    box.style.display = 'none';//隐藏盒子
                    btn1.value ='显示';
                    
                }
            }
            
        }
    </script>
</head>
<body>
    <input id="btn1"  type="button" value="隐藏">
    <br>
    <br>
    <div id="box">

    </div>
</body>
</html>

效果图：
没点击按钮时：
在这里插入图片描述
点击后：

存在问题：
var box_display = box.style.display;//无法获取。不懂原理（待解决） alert(box_display);//弹出undefined

随着星期改变背景颜色

HTML 代码：

 window.onload = function(){
            var btn1 = 6;
            var body = document.getElementById('body');

            switch(btn1){
                case 0:
                    body.style.backgroundColor = 'lightblue';
                    break;
                case 1:
                    body.style.backgroundColor = 'lightgreen';
                    break;
                case 2:
                    body.style.backgroundColor = 'gold';
                    break;
                case 3:
                    body.style.backgroundColor = 'pink';
                    break;
                case 4:
                    body.style.backgroundColor = 'green';
                    break;
                case 5:
                    body.style.backgroundColor = 'chooclate';
                    break;
                case 6:
                    body.style.backgroundColor = 'red';
                    break;
            }
               }

改变btn1的值来切换颜色

简单计算器

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <script>
        window.onload = function(){
            var iNum01 = document.getElementById('num1');
            var iNum02 = document.getElementById('num2');
            var btn1 = document.getElementById('sum')
            btn1.onclick = function(){
                if ((iNum01.value == '') || (iNum02.value == '')){
                    alert('请输入要计算的值');
                } 
                else{
                     alert(parseInt(iNum01.value) + parseInt(iNum02.value));
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" name="" id="num1">
    +
    <input type="text" name="" id="num2">
    <input id='sum' type="button" value="等于">
</body>
</html>

效果图：

内容为空时点击等于：
在这里插入图片描述
有内容时点击等于：

码界索隆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS（三）分支语句

文章目录条件语句运算符if else多重if elseswitch语句练习按钮切换元素显示或隐藏条件语句通过条件来控制程序的走向，就需要用到条件语句运算符算术运算符：+ 、- 、* 、/（除）、%（求余）赋值运算符：= 、+= 、-= 、/= 、%=条件运算符：== 、===、 > 、>= 、< 、<= 、!= 、&&(而且) 、||（或者）、!(否)注：" == "与 " === “的区别：1.” == “会先将两边的值转换为同一类型再进行比
复制链接

扫一扫