Question

I would like to make an animation with numbers starting at 0 and then goes to let’s say 3000 in a certain amount of time.

So you’ll see all the number between 0 and 3000 until it reach 3000 in a given milliseconds time.

Any clue on that?

Edit

Ok maybe seeing all the numbers between is a pain if you have a ending number like 1 million. So maybe something that would reach the end number by skipping some numbers between to reach it faster. Could it be a solution ?

Answer 1

You can use the setInterval method to run code as a set interval. This will count up to 3000 in 48000 milliseconds:

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

Demo: http://jsfiddle.net/Guffa/5grSA/

Note: 60 Hz is a common update frequency for screens (e.g. most LCD displays). If you want all numbers to actually be visible on the screen, you can’t change the numbers more often than every 16th millisecond. If you want the numbers to count up faster, then there is no point in setting a shorter time, then just skip some of the numbers, for example only show every 10th number to make it run in 4800 ms.:

cnt += 10;