js点击按钮八个盒子随机一个闪烁并不断切换盒子闪烁

您想询问如何实现“点击按钮八个盒子随机一个闪烁并不断切换盒子闪烁”这一功能吗？如果是的话，可以通过以下步骤实现：

1. 创建八个盒子，并通过CSS设置它们的样式和位置。
2. 为按钮添加点击事件监听器。
3. 在事件处理程序中，使用JavaScript生成一个随机整数（1到8之间）。
4. 将随机整数与八个盒子匹配，并添加一个闪烁的CSS类（例如“blinking”）。
5. 使用setInterval（）函数和另一个CSS类（例如“selected”）定时更改选定的盒子，并在每个闪烁期间切换盒子。

下面是一个简单的实现示例：

HTML代码：

<button id="btn">随机选择一个盒子闪烁</button>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
<div class="box" id="box7"></div>
<div class="box" id="box8"></div>

CSS代码：

.box {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  margin: 5px;
  display: inline-block;
}

.blinking {
  animation: blink 1s infinite;
}

.selected {
  background-color: yellow;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

JavaScript代码：

const btn = document.querySelector('#btn');
const boxes = document.querySelectorAll('.box');

btn.addEventListener('click', () => {
  // 生成1到8的随机整数
  const randomIndex = Math.floor(Math.random() * 8) + 1;
  
  // 清除所有闪烁
  boxes.forEach(box => box.classList.remove('blinking', 'selected'));
  
  // 添加闪烁CSS类
  boxes[randomIndex - 1].classList.add('blinking');
  
  // 定时选择选定的盒子并切换盒子
  let index = randomIndex;
  setInterval(() => {
    boxes[index - 1].classList.add('selected');
    setTimeout(() => {
      boxes[index - 1].classList.remove('selected');
    }, 500);
    index = index % 8 + 1;
  }, 1000);
});

希望以上代码可以帮助您实现所需的功能。