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

5 comments:

  1. Stuart BainbridgeApril 18, 2011 at 4:53 PM

    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

    ReplyDelete
  2. Suprotim AgarwalApril 18, 2011 at 7:34 PM

    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

    ReplyDelete
  3. StuartMay 5, 2011 at 8:54 AM

    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?

    ReplyDelete
  4. StuartMay 19, 2011 at 10:50 AM

    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;
    }

    ReplyDelete
  5. BTR NaiduJuly 13, 2011 at 8:23 AM

    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....

    ReplyDelete