HTML+JS 实现随机变色块：26个色块随机变绿 - 代码示例

{ "title": "HTML页面上26个色块 使用JS", "content": "@1 每隔0.5s，随机让一个色块变为绿色（非饱和色）\n@2 仔细观察@1实现效果，进行优化，实现@3\n@3 随机让背景为白色的色块变为绿色\n@4 当所有色块均变为绿色时，弹框警告“结束”，并清除定时器内容：可以使用以下代码实现上述功能：\n\nHTML代码：\nhtml\n<div id="color-blocks">\n <div class="color-block"></div>\n <div class="color-block"></div>\n ...\n <div class="color-block"></div>\n</div>\n\n\nCSS代码：\ncss\n.color-block {\n width: 50px;\n height: 50px;\n background-color: white;\n display: inline-block;\n margin: 5px;\n}\n\n\nJavaScript代码：\njavascript\nvar colorBlocks = document.getElementsByClassName("color-block");\nvar intervalId;\n\nfunction makeRandomGreen() {\n var randomIndex = Math.floor(Math.random() * colorBlocks.length);\n var randomBlock = colorBlocks[randomIndex];\n if (randomBlock.style.backgroundColor !== "green") {\n randomBlock.style.backgroundColor = "green";\n } else {\n makeRandomGreen();\n }\n}\n\nfunction makeRandomBackgroundGreen() {\n var whiteBlocks = [];\n for (var i = 0; i < colorBlocks.length; i++) {\n if (colorBlocks[i].style.backgroundColor === "white") {\n whiteBlocks.push(colorBlocks[i]);\n }\n }\n \n if (whiteBlocks.length === 0) {\n clearInterval(intervalId);\n alert("结束");\n } else {\n var randomIndex = Math.floor(Math.random() * whiteBlocks.length);\n var randomBlock = whiteBlocks[randomIndex];\n randomBlock.style.backgroundColor = "green";\n }\n}\n\nintervalId = setInterval(makeRandomBackgroundGreen, 500);\n\n\n这段代码首先获取了所有色块的元素，然后定义了两个函数makeRandomGreen和makeRandomBackgroundGreen来实现不同的功能。\n\nmakeRandomGreen函数用于每隔0.5秒随机让一个色块变为绿色，但不包括已经是绿色的色块。如果随机选中的色块已经是绿色的，则递归调用该函数直到选中的色块不是绿色为止。\n\nmakeRandomBackgroundGreen函数用于随机让背景为白色的色块变为绿色。首先，它找出所有背景为白色的色块，并将它们存储在whiteBlocks数组中。然后，它判断whiteBlocks数组的长度，如果为0，则表示所有色块均已变为绿色，此时清除定时器并弹出警告框。如果whiteBlocks数组的长度不为0，则从中随机选取一个色块，并将其背景颜色设置为绿色。\n\n最后，通过setInterval函数每隔0.5秒调用makeRandomBackgroundGreen函数，实现色块的自动变化。 }