点击变颜色

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>点击变颜色</title>
  6.     <!-- IMPORT CSS -->
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         html,
  13.         body {
  14.             /* width: 100%; */
  15.             height: 100%;
  16.             overflow: hidden;
  17.         }
  18.         button {
  19.             padding: 40px;
  20.             line-height: 40px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <button id="changeBtn">点我啊~~</button>
  27.     <!-- IMPORT JS -->
  28.     <script>
  29.         let body = document.body;
  30.         let changeBtn = document.getElementById('changeBtn');
  31.         // 从数组中拿到某一个样式值只需要：ary[数字索引]
  32.         let i = 0;
  33.         let ary = ['white', 'pink', 'lightblue', 'lightgreen', 'rgb(194,109,109)', 'orange', '#999'];
  34.         // 点击按钮实现功能
  35.         changeBtn.onclick = function () {
  36.             i++; // ary[i] 每一次点击基于累加后的 I 作为索引，从数组中拿到不同的颜色样式值
  37.             i > ary.length - 1 ? i = 0 : null; // 如果索引累加后比数组最大的索引都要大，我们让其从零开始即可
  38.             body.style.backgroundColor = ary[i];
  39.         }
  40.         /* changeBtn.onclick = function () {
  41.             // 获取当前的背景颜色 元素 .style.xxx 只能获取行内样式（颜色在样式中使用16进制方式，JS 中获取到的是 RGB 的值）
  42.             let bg = body.style.backgroundColor;
  43.             switch (bg) {
  44.                 case 'white':
  45.                     body.style.backgroundColor = 'red';
  46.                     break;
  47.                 case 'red':
  48.                     body.style.backgroundColor = 'green';
  49.                     break;
  50.                 case 'green':
  51.                     body.style.backgroundColor = 'blue';
  52.                     break;
  53.                 default:
  54.                     body.style.backgroundColor = 'white';
  55.             }
  56.         } */
  57.     </script>
  58. </body>
  59. </html>