JS小应用：js实现简单开关灯

JS小应用：js实现简单开关灯。

HTML：

<button>开关灯</button>

JS：

    <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>

试试吧。