JavaScript 实现十个格子随机变绿游戏 - 代码示例与解析

您可以使用 JavaScript 编写以下代码来实现您的需求：

HTML:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS:

.box {
  width: 50px;
  height: 50px;
  background-color: grey;
  display: inline-block;
}

JavaScript:

var boxes = document.getElementsByClassName('box');
var timer;

function getRandomBox() {
  var randomIndex = Math.floor(Math.random() * boxes.length);
  return boxes[randomIndex];
}

function changeBoxColor() {
  var box = getRandomBox();
  box.style.backgroundColor = 'green';
  
  var allGreen = Array.from(boxes).every(function(box) {
    return box.style.backgroundColor === 'green';
  });
  
  if (allGreen) {
    clearInterval(timer);
    alert('结束');
  }
}

timer = setInterval(changeBoxColor, 500);

这段代码首先获取了所有class为'box'的div元素，并定义了一个定时器timer。然后，通过getRandomBox函数随机选择一个div元素，并将其背景颜色设置为绿色。接下来，通过Array.from方法将boxes转换为数组，并使用every方法检查是否所有的div的背景颜色都为绿色。如果是，则清除定时器，并弹出警告框显示"结束"。最后，使用setInterval方法每隔0.5秒调用一次changeBoxColor函数，实现每隔0.5秒随机将一个div的背景颜色设置为绿色的效果。