html css js 生成随机颜色

起因，目的:

整理文件，发现之前写的一个小工具。

效果图

点击按钮会生成新的格子。

DOCTYPE html>
html lang="en">
  head>
    meta charset="UTF-8" />
    meta name="viewport" content="width=device-width, initial-scale=1.0" />
    title>Random Color Blockstitle>
    style>
      .color-block {
        width: 100px;
        height: 100px;
        display: inline-block;
        margin: 5px;
      }
      #generate-button {
        justify-content: center;
        align-items: center;
        width: 350px;
        height: 80px;
        background-color: pink;
        margin-left: 300px;
        font-size: 26px; 
        font-weight: bold; 
        border-radius: 5px; 
      }

      #generate-button:hover {
        background-color: #0056b3; 
      }

      #color-grid {
        margin: 100px;
        border: solid 2px black;
        border-radius: 5px; 
      }
    style>
  head>
  body>
    h1>
      button id="generate-button">Generate New Colorsbutton>
    h1>

    div id="color-grid">div>

    script>
      
      function getRandomColor(min, max) {
        return `rgb(${Math.floor(Math.random() * (max - min + 1)) + min}, ${
          Math.floor(Math.random() * (max - min + 1)) + min
        }, ${Math.floor(Math.random() * (max - min + 1)) + min})`;
      }

      
      function createColorGrid(size) {
        const grid = document.getElementById("color-grid");
        grid.innerHTML = ""; 
        for (let i = 0; i  size * size; i++) {
          const block = document.createElement("div");
          block.classList.add("color-block");
          block.style.backgroundColor = getRandomColor(10, 250);
          grid.appendChild(block);
        }
      }

      
      function handleButtonClick() {
        createColorGrid(9); 
      }

      
      createColorGrid(9); 

      
      document
        .getElementById("generate-button")
        .addEventListener("click", handleButtonClick);
    script>
  body>
html>

老哥留步，支持一下。