将类逐一添加到一组 span 标签中
我得到的 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 编写这个吗？
尚方宝剑之说浏览 78回答 1
1回答
-
斯蒂芬大帝
你可以这样做：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>
随时随地看视频慕课网APP
相关分类
Html5