效果圖
點擊某個色塊時，選取色塊顏色向四周散播；當(dāng)點擊另一個色塊時，前一次的散播過程停止，開啟新一次向四周散播的過程。
<!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 網(wǎng)格
let clickedFlag = false; // 每次點擊時，取反
// 創(chuàng)建網(wǎng)格
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; // 會被瀏覽器轉(zhuǎn)換為rgb格式
gridContainer.appendChild(gridItem);
}
// 初始化所有方格的狀態(tài)，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);
}
});
// 改變顏色函數(shù)
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;
// 初始化所有方格的狀態(tài)
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') {
// 獲取當(dāng)前顏色值
const currentColor = getColorValue(baseColor);
// 生成新顏色（基礎(chǔ)顏色 + 小隨機值）
const newHue = (parseInt(currentColor.hue) + parseInt(Math.random() * 30 - 15)) % 360;
// 應(yīng)用新顏色
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); // 添加延遲以創(chuàng)建波浪效果
}
}
// 從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>
