用js实现简单开关灯

body部分

<button>开关灯</button>

script部分

    <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>
posted @   L-L  阅读(917)  评论(0编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
点击右上角即可分享
微信分享提示