我在 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
最佳答案
我猜您的意思是在 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 上的示例.
关于javascript - 如何为 JavaScript 计数器设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39630490/