我得到的 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 關注
- 107 瀏覽
添加回答
舉報
0/150
提交
取消