起因， 目的:
整理文件，发现之前写的一个小工具。
效果图
点击按钮会生成新的格子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Random Color Blocks</title> <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 Colors</button> </h1> <div id="color-grid"></div> <script> // Function to generate a random color within the specified range 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 to create a grid of color blocks function createColorGrid(size) { const grid = document.getElementById("color-grid"); grid.innerHTML = ""; // Clear the grid 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 to handle the button click event function handleButtonClick() { createColorGrid(9); // Start with a 3x3 grid } // Initial grid creation createColorGrid(9); // Start with a 3x3 grid // Add event listener to the button document .getElementById("generate-button") .addEventListener("click", handleButtonClick); </script> </body> </html>
老哥留步，支持一下。
