Go from 0 to a certain number in javascript

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 ?

This is pretty easy to achieve using `setTimeout()`. Give it a try on your own first. — Sirko, Oct 11 '12 at 14:48
@GustavCarlson Nothing that's why I'm asking how to do it ;) — Warface, Oct 11 '12 at 14:50
maybe this can help you http://stackoverflow.com/questions/1191865/code-for-a-simple-javascript-countdown-timer — MaVRoSCy, Oct 11 '12 at 14:50

score 2 · Answer 1 · answered Oct 11 '12 at 14:50

2

You can use setInterval as jsfiddle

var i = 0, interval = 10;
    var t = setInterval(function(){
           if(i == 3000 ) clearInterval(t);
          document.body.innerHTML = i++;
    }, interval );

answered Oct 11 '12 at 14:50

Anoop

23,044
10
62
76

Ok nice but how I can make it go to 3000 in like 2 seconds ? – Warface Oct 11 '12 at 14:52
@Warface for that you can't use setInterval or setTimeout as minimum timeout is decided by browser. so even you pass 0 as interval it will take more than 10 ms for each loop. you can use for loop. – Anoop Oct 11 '12 at 14:56
@RobHardy That will not solve the problem as explained in my previous comment. – Anoop Oct 11 '12 at 14:57
Ok because the number could be 100 000 too... so with a interval of 10ms.... it's not fast enough and kind of boring. Anything to achieve something like that with your code but reaching the end number in a given time ? – Warface Oct 11 '12 at 15:00
You need to decide what you max frame rate is then (say: 60fps), and divide your final number into steps based on the number of milliseconds / frame rate. – Rob Hardy Oct 11 '12 at 15:02

Guffa · Accepted Answer · 2012-10-11T15:04:46.757

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;

score 1 · Answer 3 · answered Oct 11 '12 at 14:49

1

Create a variable for your counter then use setInterval to call a function to increment the counter and write the current value to the DOM.

answered Oct 11 '12 at 14:49

Matt Burland

44,552
18
99
171

score 0 · Answer 4 · answered Oct 11 '12 at 15:27

Building on Shusl's answer and our comments:

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/

Go from 0 to a certain number in javascript

4 Answers4