效果图
点击某个色块时，选取色块颜色向四周散播；当点击另一个色块时，前一次的散播过程停止，开启新一次向四周散播的过程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变色龙效果</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
}
.grid-container {
display: grid;
grid-template-columns: repeat(100, 10px);
grid-template-rows: repeat(100, 10px);
gap: 0;
}
.grid-item {
width: 10px;
height: 10px;
background-color: #ccc;
cursor: pointer;
transition: background-color 0.1s ease;
}
</style>
</head>
<body>
<div class="grid-container" id="grid"></div>
<script>
/*
* 点击格子，通过递归的方式，确保更新颜色的行为向外传播；
* 如果另点一个格子，确保之前的递归终止，然后重新开启新的传播。
* */
document.addEventListener('DOMContentLoaded', () => {
const gridContainer = document.getElementById('grid');
const gridSize = 100; // 100x100 网格
let clickedFlag = false; // 每次点击时，取反
// 创建网格
for (let i = 0; i < gridSize * gridSize; i++) {
const gridItem = document.createElement('div');
gridItem.className = 'grid-item';
// 随机初始颜色
const randomHue = Math.floor(Math.random() * 360);
gridItem.dataset.originalColor = `hsl(${randomHue}, 70%, 70%)`; // 记录hsl格式
gridItem.style.backgroundColor = gridItem.dataset.originalColor; // 会被浏览器转换为rgb格式
gridContainer.appendChild(gridItem);
}
// 初始化所有方格的状态，state值有'false'、'true'
function initItemsState(items, state = 'false') {
items.forEach(item => {
item.dataset.changed = state;
});
}
// 使用事件委托处理点击事件
gridContainer.addEventListener('click', (event) => {
const clickedItem = event.target;
if (clickedItem.classList.contains('grid-item')) {
clickedFlag = !clickedFlag;
changeColor(clickedItem, clickedItem.dataset.originalColor, clickedFlag);
}
});
// 改变颜色函数
function changeColor(clickedItem, baseColor, currentClickedFlag) {
const gridItems = Array.from(document.querySelectorAll('.grid-item'));
const index = gridItems.indexOf(clickedItem);
const row = Math.floor(index / gridSize);
const col = index % gridSize;
// 初始化所有方格的状态
initItemsState(gridItems);
// 开始传播
propagateColorChange(gridItems, row, col, baseColor, 0, currentClickedFlag);
}
// 传播颜色变化
function propagateColorChange(gridItems, row, col, baseColor, depth, currentClickedFlag) {
if (currentClickedFlag !== clickedFlag) return; // 重新点击后，终止之前的操作
if (depth > 100) return; // 限制传播深度
const index = row * gridSize + col;
const item = gridItems[index];
// if (!['recover', 'true'].includes(item.dataset.changed)) {
if (item.dataset.changed !== 'true') {
// 获取当前颜色值
const currentColor = getColorValue(baseColor);
// 生成新颜色（基础颜色 + 小随机值）
const newHue = (parseInt(currentColor.hue) + parseInt(Math.random() * 30 - 15)) % 360;
// 应用新颜色
item.style.backgroundColor = item.dataset.originalColor = `hsl(${newHue}, 70%, 70%)`;
item.dataset.changed = 'true';
// 递归处理相邻方格
const newBaseColor = item.dataset.originalColor;
setTimeout(() => {
// 上
if (row > 0) propagateColorChange(gridItems, row - 1, col, newBaseColor, depth + 1, currentClickedFlag);
// 下
if (row < gridSize - 1) propagateColorChange(gridItems, row + 1, col, newBaseColor, depth + 1, currentClickedFlag);
// 左
if (col > 0) propagateColorChange(gridItems, row, col - 1, newBaseColor, depth + 1, currentClickedFlag);
// 右
if (col < gridSize - 1) propagateColorChange(gridItems, row, col + 1, newBaseColor, depth + 1, currentClickedFlag);
}, 10 * depth); // 添加延迟以创建波浪效果
}
}
// 从HSL字符串中提取颜色值
function getColorValue(hslString) {
const match = hslString.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
if (match) {
return {
hue: parseInt(match[1]),
saturation: parseInt(match[2]),
lightness: parseInt(match[3])
};
}
return { hue: 0, saturation: 0, lightness: 0 };
}
});
</script>
</body>
</html>
