Pink老师JavaScript课程作业 -点击按钮页面关灯和开灯

最新推荐文章于 2025-11-23 23:13:13 发布

原创

最新推荐文章于 2025-11-23 23:13:13 发布 · 584 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

这篇博客介绍了如何使用JavaScript实现点击按钮控制页面背景开关灯的效果。通过JavaScript代码，点击按钮可以切换页面的背景颜色，模拟关灯和开灯的状态，再次点击则可以恢复原状。

效果：

点击前：

点击后：

再点击：

 <script>
        //取元素
        var btn = document.querySelector('button');
        var body = document.body;
        //点击按钮后body变色（声明一个flag值:
        //若值为1，点击后变黑；若值为0，点击后变白）
        var flag = 1;
        btn.onclick = function () {
            if (flag === 1) {
                body.style.backgroundColor = 'black';
                flag = 0;  //变回0，为下次变白做准备
            }
            else if (flag === 0) {
                body.style.backgroundColor = 'white';
                flag = 1;
            }
        }
    </script>