js实现随机八个盒子闪烁功能
时间: 2024-01-03 17:50:07 浏览: 30
好的,我可以回答这个问题。您可以使用JavaScript的Math.random()方法生成随机数,然后通过改变CSS样式使八个盒子闪烁。以下是示例代码:
HTML:
```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>
```
CSS:
```css
.box {
width: 50px;
height: 50px;
background-color: yellow;
display: inline-block;
margin-right: 10px;
}
.box.blink {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {
background-color: red;
}
}
```
JavaScript:
```javascript
var boxes = document.querySelectorAll('.box');
setInterval(function() {
// 移除所有盒子的闪烁类名
boxes.forEach(function(box) {
box.classList.remove('blink');
});
// 随机选择八个盒子并添加闪烁类名
var randomIndexes = [];
while (randomIndexes.length < 8) {
var randomNumber = Math.floor(Math.random() * boxes.length);
if (randomIndexes.indexOf(randomNumber) === -1) {
randomIndexes.push(randomNumber);
boxes[randomNumber].classList.add('blink');
}
}
}, 1000); // 1秒钟切换一次闪烁状态
```