JavaScript实现开关灯效果:两种代码位置方案

作者:交互手记时间:2026-10-24 19:36:07浏览:127

本文介绍如何使用JavaScript实现简单的开关灯效果。通过监听按钮点击事件,利用标志变量切换页面背景颜色。重点解析script标签放置在button元素上方与下方时的代码差异,分别给出对应的完整实现方案,帮助开发者理解DOM加载时机与代码编写位置的关系。

HTML按钮结构

HTML结构部分包含一个用于触发开关灯效果的按钮元素。


<button>开关灯</button>

JavaScript逻辑实现

JavaScript脚本部分负责处理按钮点击逻辑,实现背景颜色的切换功能。


    <script>

        // window.onload 是窗口加载事件,可以实现将代码写到元素上面

        window.addEventListener('load', function () {

            var btn = document.querySelector('button');

            // 定义一个变量,用来判断灯的开关情况

            var flag = 0;

            btn.onclick = function () {

                if (flag == 0) {

                    document.body.style.backgroundColor = 'black';

                    flag = 1;

                } else {

                    document.body.style.backgroundColor = 'pink';

                    flag = 0;

                }

            }

        })

    </script>

脚本位置差异分析

当script脚本代码直接放置在button按钮元素之前时,

按钮前置脚本方案

需要采用以下代码结构来确保功能正常:


<script>

        var btn = document.querySelector('button');

        var flag = 0;

        btn.onclick = function () {

            if (flag == 0) {

                document.body.style.backgroundColor = 'black';

                flag = 1;

            } else {

                document.body.style.backgroundColor = 'pink';

                flag = 0;

            }

        }

    </script>
 

本文关于利用JavaScript实现简单开关灯效果的教程到此结束。如需了解更多相关JS实现开关灯的内容,建议查阅本站往期文章或继续浏览后续相关文章,感谢大家的支持!

作者最新文章