master

分支 (1)

管理

管理

master

one-case-per-day
/
28-hoverboard.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hoverboard</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #000;
      }

      .container {
        width: 400px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 50px auto;
      }

      .square {
        width: 16px;
        height: 16px;
        margin: 2px;
        background-color: #1d1d1d;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        transition: all 1s ease;
      }

      .square:hover {
        transition: 0s;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>

    <script>
      const container = document.querySelector('.container');
      let nums_of_square = 500; // 小方格数量
      console.time('代码执行时间'); // 开始计时
      for (let i = 0; i < nums_of_square; i++) {
        const square = document.createElement('div');
        square.classList.add('square');

        square.addEventListener('mouseover', () => setColor(square));
        square.addEventListener('mouseout', () => removeColor(square));

        container.appendChild(square);
      }
      console.timeEnd('代码执行时间'); // 结束计时并输出结果

      const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71'];
      function setColor(element) {
        const color = getRandomColor();
        element.style.background = color;
        element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`;
      }
      function removeColor(element) {
        element.style.background = '#1d1d1d';
        element.style.boxShadow = '0 0 2px #000';
      }
      function getRandomColor() {
        return colors[Math.floor(Math.random() * colors.length)];
      }
    </script>
  </body>
</html>