效果图：

开关灯案例_html

源代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      background-color: white;
    }
    div {
      height: 200px;
      width: 200px;

      margin:100px auto;
    }
    button {
      width: 100%;
      height: 100%;
      background: url(image/black.png) no-repeat;
      border: 0px;
      outline: 0px;
    }
  </style>
</head>

<body>
  <div>
    <button>
      
    </button>
  </div>
  <script>
    var body = document.querySelector('body');
    var bt = document.querySelector('button');
    var flag = 1;
    bt.onclick = function () {
      if(flag == 1){
          this.style.background='url(image/white.png)';
          body.style.background='black';
          flag = 0;
      }
      else {
          this.style.background='url(image/black.png)';
          body.style.background='white';
          flag = 1;

      }
    
    }
  </script>
</body>
</html>

素材：

白灯：

可能因为CSDN的背景色看不出来

开关灯案例_js_02


黑灯：

开关灯案例_leechoy_03