Question

I have a a counter that needs to count up from $0 to $10,000 in x seconds (most likely 3 seconds).

Just straight text, kind of like a millisecond countdown timer, but upwards and with a dollar sign.

I’d rather not use a bulky plugin as this just needs to loop through 1-10,00 in x seconds and update every 100ms or so.

I’m stuck at creating the loop that will update, where should I start?

---

Here is what I’ve got so far on a click event:

  function countUp() {
    console.log('counted');
    }

    setInterval("countUp()", 1000)

Answer 1

I would use code from http://www.mredkj.com/javascript/numberFormat.html to add commas:

function addCommas(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;
}

I’d then use setInterval to count up to 1000, something like this:

var x = 1;
    var interval = setInterval( 
    function(){
        if (x < 10000){
            x = parseInt(x) + 100;
            if(x > 10000){x = 10000}
            $('#number').html("$" + addCommas(x));
            }},
            10);

The trick is to get it to happen in 3 seconds since the execution speed of javascript varies between browsers. The 10 millisecond delay and counting in jumps of 100 worked for me in FireFox and Google Chrome.

The code above will keep running every 10 milliseconds, but won’t actually change anything once it exceeds $10,000. It can therefore will start counting up again as soon as you set x to something less than 10,000. However you can stop executing the code by using clearInterval(interval)