jQuery or Javascript continuous counter (countup)

Question

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

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 2

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 3

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