起因， 目的:
整理文件，发现之前写的一个小工具。
效果图
点击按钮会生成新的格子。
<!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>
老哥留步，支持一下。
