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

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

5 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; April 18, 2011 at 4:53 PM
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; April 18, 2011 at 7:34 PM
Stuart 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?; May 5, 2011 at 8:54 AM
Stuart 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;
}; May 19, 2011 at 10:50 AM
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....; July 13, 2011 at 8:23 AM