JavaScript 实现随机变色块：优化代码并添加结束提示

本文介绍了如何使用 JavaScript 代码实现每隔 0.5 秒随机将一个色块变为绿色，并对代码进行了优化，使之能够随机将背景为白色的色块变为绿色，并在所有色块变为绿色时弹出结束提示。

@1 每隔 0.5s，随机让一个色块变为绿色（非饱和色）

实现每隔 0.5 秒随机让一个色块变为绿色（非饱和色）的代码可以如下：

var blocks = document.getElementsByClassName('block'); // 获取所有色块元素
var timer = setInterval(function() {
  var randomIndex = Math.floor(Math.random() * blocks.length); // 随机生成一个色块索引
  blocks[randomIndex].style.backgroundColor = 'lime'; // 将对应索引的色块设置为绿色
}, 500);

@2 优化代码：随机让背景为白色的色块变为绿色

观察@1实现效果后，我们可以进行优化，通过添加一个条件判断来实现随机让背景为白色的色块变为绿色。优化后的代码如下：

var blocks = document.getElementsByClassName('block'); // 获取所有色块元素
var timer = setInterval(function() {
  var whiteBlocks = Array.from(blocks).filter(function(block) {
    return block.style.backgroundColor === 'white';
  });
  if (whiteBlocks.length > 0) {
    var randomIndex = Math.floor(Math.random() * whiteBlocks.length); // 随机生成一个背景为白色的色块索引
    whiteBlocks[randomIndex].style.backgroundColor = 'lime'; // 将对应索引的色块设置为绿色
  } else {
    clearInterval(timer); // 清除定时器
    alert('结束'); // 弹框警告"结束"
  }
}, 500);

@3 随机让背景为白色的色块变为绿色

代码已经在@2中进行了优化，可以随机让背景为白色的色块变为绿色。

@4 当所有色块均变为绿色时，弹框警告“结束”，并清除定时器内容

当所有色块均变为绿色时，会清除定时器并弹出警告框“结束”。在代码中已经添加了相应的逻辑。