首页 > Web开发 > 详细

用js实现简单开关灯

时间:2021-05-25 22:25:14      阅读:26      评论:0      收藏:0      [点我收藏+]

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>

用js实现简单开关灯

原文:https://www.cnblogs.com/L-hua/p/14810426.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!