流程控制语句流程控制开关

最新推荐文章于 2024-07-22 15:13:59 发布

卡夫卡的baby

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量111

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_72303943/article/details/126494628

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

流程控制语句流程控制开关

流程控制语句--流程控制开关：可以实现一开一关的效果

流程控制开关需要借助布尔值true false

<title> 流程控制语句 流程控制开关 </title>
</head>
<body>
    <h1>流程控制语句--流程控制开关：可以实现 一开 一关的效果</h1>

    <button id="btn">关灯</button>

    <script>
        // if与else 相当于是和的意思  ，在if当中执行一个命令，那么可以在else中执行另一个命令，两者可以形成一个整体的效果
        // 抓取元素
        {
            var btn = document.getElementById('btn');
            console.log(btn);
            // 定义一个开关变量
            var open = true;

           
            btn.onclick = function(){

                // 在js预言中，只要提到 是...  ==  open ==  true 可以简写  open
                if(open==true){
                    // 1、改变页面背景颜色为
                    document.body.style.background = 'black';
                    // 2、把open这个变量， 进行 重新赋值
                    open = false;
                    console.log(open);
                    // 3、把按钮上的 文字进行预言替换
                    btn.innerHTML = '请开灯！！！';
                }else{
                    // 再次点击按钮的时候，按钮没有效果（不成立）
                    // 1、改变页面背景颜色为
                    document.body.style.background = '';
                    // 2、把open这个变量， 进行 重新赋值
                    open = true;
                    console.log(open);
                    // 3、把按钮上的 文字进行预言替换
                    btn.innerHTML = '请关灯！！！';
                }
            }

           

        }
</script>

预览效果：