将类逐个添加到 span 标签组中

Question

I got html structure like this:我得到了这样的 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>

My current goal is to add every 1s class "done" (its some kind of simple loading bar) to spans one by one and when last span got "done" class everything restart and loop over and over.我目前的目标是将每个 1s 类“完成”（它的某种简单的加载栏）一个一个地添加到跨度中，当最后一个跨度“完成”类时，一切都会重新启动并一遍又一遍地循环。 Can someone help me how to write this in vanilla JavaScript?有人可以帮助我如何用 vanilla JavaScript 编写这个吗？

Answer 1

You could do it like this:你可以这样做：

 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>

将类逐个添加到 span 标签组中

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-26 21:00:24

将类逐个添加到 span 标签组中

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-26 21:00:24

解决方案1
1 已采纳 2020-03-26 21:00:24