JS实现随机色块变绿并弹框提示结束

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

const blocks = document.getElementsByClassName('block');

function changeColor() {
  const randomIndex = Math.floor(Math.random() * blocks.length);
  const randomBlock = blocks[randomIndex];
  randomBlock.style.backgroundColor = 'limegreen';
}

setInterval(changeColor, 500);

这段代码首先通过getElementsByClassName获取所有色块的元素，然后定义了一个changeColor函数用于随机选择一个色块，并将其背景颜色改为绿色。最后使用setInterval函数每隔0.5秒调用一次changeColor函数。

@2 仔细观察@1实现效果，进行优化，实现@3

对于优化，我们可以使用classList添加和删除类来实现，而不是直接更改style.backgroundColor属性。这样做可以提高代码的可读性和维护性。优化后的代码如下：

const blocks = document.getElementsByClassName('block');

function changeColor() {
  const randomIndex = Math.floor(Math.random() * blocks.length);
  const randomBlock = blocks[randomIndex];
  randomBlock.classList.add('green');
}

setInterval(changeColor, 500);

在CSS样式表中，我们可以添加以下代码来定义.green类：

.green {
  background-color: limegreen;
}

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

要实现随机让背景为白色的色块变为绿色，我们需要在changeColor函数中添加一些逻辑。优化后的代码如下：

const blocks = document.getElementsByClassName('block');

function changeColor() {
  const whiteBlocks = Array.from(blocks).filter(block => block.style.backgroundColor === 'white');
  if (whiteBlocks.length > 0) {
    const randomIndex = Math.floor(Math.random() * whiteBlocks.length);
    const randomBlock = whiteBlocks[randomIndex];
    randomBlock.classList.add('green');
  } else {
    clearInterval(timer);
    alert('结束');
  }
}

const timer = setInterval(changeColor, 500);

在这个优化后的代码中，我们使用Array.from将blocks转换为数组，并使用filter方法筛选出背景颜色为白色的色块。然后，我们检查筛选结果的长度，如果大于0，就从中随机选择一个色块并将其背景颜色改为绿色。如果没有白色色块剩下，我们通过clearInterval清除定时器，并弹出一个警告框显示“结束”。

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

为了实现当所有色块均变为绿色时弹框警告“结束”，我们需要在代码中添加一个计数器。优化后的代码如下：

const blocks = document.getElementsByClassName('block');
let count = 0;

function changeColor() {
  const whiteBlocks = Array.from(blocks).filter(block => block.style.backgroundColor === 'white');
  if (whiteBlocks.length > 0) {
    const randomIndex = Math.floor(Math.random() * whiteBlocks.length);
    const randomBlock = whiteBlocks[randomIndex];
    randomBlock.classList.add('green');
    count++;
  } else {
    clearInterval(timer);
    alert('结束');
  }
}

const timer = setInterval(changeColor, 500);

在这个优化后的代码中，我们添加了一个变量count来记录色块变为绿色的次数。每次成功将一个色块变为绿色时，我们将计数器加1。当没有剩余的白色色块时，我们通过clearInterval清除定时器，并弹出一个警告框显示“结束”。

这样，当所有色块均变为绿色时，弹框警告“结束”，并清除定时器的功能就实现了。