Display a Running Counter Using jQuery

Here’s a simple way to display a running counter using jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Display a Counter</title>
<
style type="text/css">
#displayCounter{
font-size:42px;
font-family:Georgia;
}
</style>
<
script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
</
script>
<
script type="text/javascript">
$(function() {
var cnt = 0;
var counter = setInterval(function() {
if (cnt < 20) {
$('#displayCounter').html(cnt);
cnt++;
}
else {
clearInterval(counter);
$('#displayCounter').html("Timeout!!");
}
}, 1000);
});
</script>
</
head>
<
body>
<
div id="displayCounter"></div>
</
body>
</
html>

The counter runs from 0 to 20 and then stops. You can perform any action when the counter stops. For demo purposes, I have displayed the string ‘Timeout!!’

See a Live Demo



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

6 comments:

Stuart Bainbridge said...

Hi Suprotim

Very nice piece of code.

One question, is there any way to add a comma as a thousand separator?

So that the numbers shown look like 2,000.

Thanks

Stuart

Suprotim Agarwal said...

Thanks Stuart. You should take a look at the jQuery Globalization Plugin (https://github.com/nje/jquery-glob) which will take care of string, date, and number formatting and parsing in your application.

If you need anything simpler, there are plenty of scripts on the net that show you how to add commas to numbers. Check one here - http://stackoverflow.com/questions/1990512/add-comma-to-numbers-every-three-digits-using-jquery

Anjin-sama said...

Only just coming back to this,

I tried this

$(function() {
var cnt = 990;
var counter = setInterval(function() {
if (cnt < 2000) {
$('#displayCounter').html(cnt);
cnt++;
}
else {
clearInterval(counter);
$('#displayCounter').html("2000");
}
}, 20);
});



$.fn.digits = function(){
return this.each(function(){
$(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
})
}

$(".points").digits();

and on the page I add the class pointer to your div.

But I just cannot get it working. Have you any ideas?

Anjin-sama said...

Done it..

This code also pulls in the numbers to count to from a database.


$(function() {
var cnt = 0;
var counter = setInterval(function() {
if (cnt < [cfdb-count form="*"]) {
$('#displayCounter').html(commarise(cnt));
cnt++;
}
else {
clearInterval(counter);
$('#displayCounter').html(commarise("[cfdb-count form="*"]"));
}
}, 500);
});

function commarise(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}

BTR Naidu said...

Hi,
Nice peice of code.. just one query.

I used this code as

Note: If no activity then this session will close automatically in &ltdiv id="displayCounter"&gt&lt/div&gt seconds.

All in one line. But in the live page, it shows as

Note: If no activity then this session will close automatically in
4
seconds.

Do you see the problem? There is a new line between previous line, counter and next word? How to get ride of this? Where it comes from?

Have no clue....

Suprotim Agarwal said...

Could be an aligning issue. Just put it in different div's and align them using a post I had written earlier http://www.devcurry.com/2009/08/aligning-multiple-divs-using-css.html