javascript - 如何为 JavaScript 计数器设置动画

Question

我在 JavaScript 中对从 0 到 100 的值进行计数，但整个计数应该需要 3 秒才能达到 0 到 100。但现在它在几毫秒内发生。

我该怎么做？

<span><span id="counter"> </span> of 100 files</span>


        <script>
            for(var i=0;i<=100;i++)
            {       
                setTimeout(document.getElementById("counter").innerHTML = i, 3000);
            }
        </script>

示例:

http://www.downgraf.com/wp-content/uploads/2014/09/03-yodaloader.gif

Answer 1

我猜您的意思是在 3 秒内从 1 变为 100，这是一个示例:

var i = 0;

var inv = setInterval(function() {     
    if(i < 100)
        document.getElementById("counter").innerHTML = ++i;
    else
        clearInterval(inv);
}, 3000 / 100);

这使得整个增量大约需要 3 秒。它是通过设置一个间隔(前缀)递增全局变量 i 并设置为 innerHTML 每 0.03 秒来实现的。然后在达到 100 后清除间隔。您可以根据自己的喜好修改步数、速度和界限。这是 JSFiddle 上的示例.