做这个效果最主要的一点就是在点击前先打个标记；

也就是定义一个变量使其初始值是false；

当我们每次点击时使这个变量的值取反；

这样就能达到我们想要的来回切换的结果了;

    <!-- 页面开关灯 -->
    <button type="button" class="btn">关灯</button>
    <script>
        //获取元素
        var btn = document.querySelector('.btn');
        var bd = document.body;
        //这里我们要先定义一个变量，给变量一个值为false；
        var flag = false;
        //给button按钮绑定点击事件
        btn.onclick = function() {
            //当我们每次点击flag的值都会取反，就能得到我们想要的效果
            flag = !flag  
            if (flag) {
                bd.style.backgroundColor = 'black';
                this.innerHTML = '开灯';
            } else {
                bd.style.backgroundColor = 'white';
                this.innerHTML = '关灯';
            } 
        }
    </script>

点击后的效果