怎么让js控制每个元素间隔时间段去显示
时间: 2023-12-14 17:36:20 浏览: 28
可以使用定时器 setInterval() 和 setTimeout() 来控制每个元素的显示时间间隔。
例如,假设有一组元素需要依次显示,你可以使用以下代码:
HTML:
```html
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
```
CSS:
```css
.item {
display: none;
}
```
JS:
```javascript
const items = document.querySelectorAll('.item');
let index = 0;
function showItem() {
if (index < items.length) {
items[index].style.display = 'block';
index++;
} else {
clearInterval(intervalId); // 清除定时器
}
}
const intervalId = setInterval(showItem, 1000); // 每1秒钟显示一个元素
```
在上面的代码中,我们首先将所有元素的 display 属性设置为 none,然后使用 setInterval() 函数每隔 1 秒钟调用一次 showItem() 函数。showItem() 函数会将当前元素的 display 属性设置为 block,然后将索引 index 加 1,以便下一次显示下一个元素。当 index 大于等于元素数量时,就清除定时器并停止执行。