如何利用js實(shí)現(xiàn)開(kāi)關(guān)燈

小編給大家分享一下如何利用js實(shí)現(xiàn)開(kāi)關(guān)燈，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

body部分：

<button>開(kāi)關(guān)燈</button>

script部分：

<script>

        // window.onload 是窗口加載事件，可以實(shí)現(xiàn)將代碼寫到元素上面

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

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

            // 定義一個(gè)變量，用來(lái)判斷燈的開(kāi)關(guān)情況

            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實(shí)現(xiàn)開(kāi)關(guān)燈”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！