JavaScript-开关灯效果 - sdk社区

页面有一个按钮，点击一下，就切换开关灯状态

实现思路：

创建一个变量flag，记录开关状态，开 = 1；关 = 0.
每次点击后，更改flag值
获取页面body元素对象，按钮元素对象，给按钮元素绑定点击事件，每次点击后，触发- - -onclick事件，if语句判断flag的值，如果等于1- - -代表当前是开灯状态，点击是要切换到关灯状态，将body元素的背景色设置为黑色- - -body.style.backgroundColor = ‘black’;
否则flag 等于0- - -代表当且是关灯状态，点击是要切换到开灯状态，将body元素的背景色设置为白色- - -body.style.backgroundColor = ‘#fff’;
注意body 元素对象的获取使用- - -document.body

代码示例：

<!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>
</head>

<body>
    <button>开关灯</button>
    <script>
        var btn = document.querySelector('button');
        var body = document.body;
        var flag = 1;
        btn.onclick = function() {
            if (flag === 1) {
                body.style.backgroundColor = 'black';
                flag = 0;
            } else {
                body.style.backgroundColor = '#fff';
                flag = 1;
            }
        }
    </script>
</body>

</html>

页面效果：

开关灯1.gif