jQuery or Javascript continuous counter (countup)

Question

Hi guys,

Looking for a script that I can ideally enter a starting number and a start date, which then continues to increment based on a rate I set e.g. 1 per second. The script would ideally calculate what number it should be on based on the difference between the current time and start time.

It's meant to look like it's showing a live count.

Ideally, something like the counter on http://sendgrid.com/

Has anyone got a link or plugin or solution they can share?

If the numbers can be replaced with images of numbers even better, but a starting point would be much appreciated.

Thanks

Answer 1

Maybe you have a page with this markup:

<div id='counter'><%= some_number_from_database_or_similar() %></div>

And so you could write a script like this:

var INTERVAL = 1;

$(document).ready( function() {
  var delay = INTERVAL * 1000;
  var target = $('#counter');
  var counter = parseInt( target.text(), 10 );
  setInterval( function() {
    target.text( counter++ );
  }, delay );
} );

This isn't entirely accurate since you can't be sure the function will get called exactly once every second, but it'll be pretty close (and how accurate do you really need it to be, anyway?). Alternatively you could create a new Date() and get it's timestamp, then create another one every interval and just calculate the number of actual seconds that have passed... Seems too expensive to be worth it.

As far as using images for the numbers, you could just change the interval function to be something like:

function() {
  var counterString = (counter++).toString();
  var chunks = [];
  for( var i = 0; i < counterString.length; i++ ) {
    chunks.push( "<img src='/images/numbers/" + counterString[i] + ".png' />" );
  }
  target.html( chunks.join('') );
}

Answer 2

you can build it on your own or just use this plugin. there's a countup there.

Answer 3

If you want a javascript only solution, you can just make a div like this:

<div id="counter"></div>

And then use the following script somewhere on the page:

var START_DATE = new Date("July 27, 2010 13:30:00"); // put in the starting date here
var INTERVAL = 1; // in seconds
var INCREMENT = 2; // increase per tick
var START_VALUE = 9001; // initial value when it's the start date
var count = 0;

window.onload = function()
{
 var msInterval = INTERVAL * 1000;
 var now = new Date();
 count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
 document.getElementById('counter').innerHTML = count;
 setInterval("count += INCREMENT; document.getElementById('counter').innerHTML = count;", msInterval);
}

You can use a technique similar to that of thenduks to get images, or you could just style the counter div with CSS.

Answer 4

How can I format the output of this counter to have the commas in the appropriate place? For instance instead of showing the number like this: 1278900 it would display like this: 1,278,900.

Any way to do this?