0

我想制作一个数字从 0 开始的动画，然后在一定时间内变成 3000。

所以你会看到 0 到 3000 之间的所有数字，直到它在给定的毫秒时间内达到 3000。

有什么线索吗？

编辑

好吧，如果你有一个像 100 万这样的结束数字，那么看到它们之间的所有数字可能会很痛苦。因此，也许可以通过跳过一些数字来更快地到达终点。这可能是一个解决方案吗？

4

4 回答 4

2

您可以使用 setInterval 作为jsfiddle

var i = 0, interval = 10;
    var t = setInterval(function(){
           if(i == 3000 ) clearInterval(t);
          document.body.innerHTML = i++;
    }, interval );​
于 2012-10-11T14:50:44.147 回答
2

您可以使用该setInterval方法以设定的时间间隔运行代码。这将在 48000 毫秒内计数到 3000：

var cnt = 0;
var timer = window.setInterval(function(){
  cnt++;
  document.getElementById('display').innerHTML = cnt;
  if (cnt == 3000) {
    window.clearInterval(timer);
  }
}, 16);

演示：http: //jsfiddle.net/Guffa/5grSA/

注意：60 Hz 是屏幕（例如大多数 LCD 显示器）的常见更新频率。如果您希望所有数字在屏幕上实际可见，则不能比每 16 毫秒更频繁地更改数字。如果你想让数字更快地计数，那么设置更短的时间是没有意义的，那么只需跳过一些数字，例如只显示每 10 个数字以使其在 4800 毫秒内运行：

cnt += 10;
于 2012-10-11T14:59:26.753 回答
1

为您的计数器创建一个变量，然后使用 setInterval 调用一个函数来递增计数器并将当前值写入 DOM。

于 2012-10-11T14:49:16.363 回答
0

基于 Shusl 的回答和我们的评论：

function AnimateCount(CountTo, MSTime, FPS) {
    var MSPerFrame = (1000 / FPS);
    var step = (CountTo / (MSTime / MSPerFrame));
    var Value = 0;
    var Timer = setInterval(
        function() {
            Value += step;
            if(Value >= CountTo)
            {
                clearInterval(Timer);
                Value = CountTo;
            }
            document.body.innerHTML = Math.round(Value);
        },
        MSPerFrame
    );
}

AnimateCount(100000, 2000, 60);

http://jsfiddle.net/kMjrM/1/

于 2012-10-11T15:27:55.147 回答