我得到的 html 结构是这样的：<body>
<div class="container">
<span class="block done" id="1"></span>
<span class="block" id="2"></span>
<span class="block" id="3"></span>
<span class="block" id="4"></span>
<span class="block" id="5"></span>
</div>
<script src="loaders.js"></script>
</body>我当前的目标是将每 1s 类“完成”（其某种简单的加载栏）添加到一个又一个的跨度，当最后一个跨度“完成”类时，所有内容都会重新启动并一遍又一遍地循环。有人可以帮我如何用普通 JavaScript 编写这个吗？
1 回答
斯蒂芬大帝
TA贡献1827条经验 获得超8个赞
你可以这样做：
var blocks = document.getElementsByClassName('block');
(function animateProgress(n) {
for (var i = 0; i < blocks.length; i++) {
blocks[i].classList[i < n ? 'add' : 'remove']('done');
}
setTimeout(function() {
animateProgress((n + 1) % (blocks.length + 1));
}, 400);
})(0);
.block {
float: left;
background: #eceded;
padding: 1em;
margin: 1px;
}
.block.done {
background: #7be47b;
}
<div class="container">
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
<span class="block"></span>
</div>
- 1 回答
- 0 关注
- 77 浏览
添加回答
举报
0/150
提交
取消