登录
原创

JavaScript-开关灯效果

发布于 2021-07-05 阅读 231
  • 前端
  • JavaScript
原创

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

实现思路:

  1. 创建一个变量flag,记录开关状态,开 = 1;关 = 0.
    每次点击后,更改flag值

  2. 获取页面body元素对象,按钮元素对象,给按钮元素绑定点击事件,每次点击后,触发- - -onclick事件,if语句判断flag的值,如果 等于1- - -代表当前是开灯状态,点击是要切换到关灯状态,将body元素的背景色设置为黑色- - -body.style.backgroundColor = ‘black’;
    否则flag 等于0- - -代表当且是关灯状态,点击是要切换到开灯状态,将body元素的背景色设置为白色- - -body.style.backgroundColor = ‘#fff’;

  3. 注意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

评论区

零00
4粉丝

时光荏苒,我自清欢

0

0

0

举报