流程控制语句流程控制开关_如何在程序流程图中添加随时开关-CSDN博客

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

本文通过一个简单的JavaScript示例展示了如何使用流程控制开关来控制页面背景颜色和按钮文字的切换。通过定义一个布尔变量open作为开关，结合if...else语句，实现点击按钮时背景颜色在黑色和默认色之间切换，同时更新按钮的文字提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

流程控制开关需要借助布尔值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>

预览效果：