jQuery growing number help

Question

Hay guys, i don't know if there's a plugin for this.

But what i want to do is code something which appears to "grow" or "add".

So it starts from

0000.00

then grows up to a set value (ie 9000.00)

so it goes 0000.00, 0000.01, 0000.02, 0000.03 ... 8999.98,8999.99, 9000.00

Any ideas?

Answer 1

I assume you mean you'd like this number to be displayed as it grows?

Here's a solution which doesn't require jQuery:

var   start = 0
    , max = 9000
    , step = .01
    , refreshRate = 50 // ms
    , number = start
    , el = document.getElementById('displayField')
    , growNumber = function() {
        number += step;
        el.innerHTML = number; // you might want to format it to your liking here
        if (number >= max) {
            clearInterval(timerId);
        }
      }
    , timerId = setInterval(growNumber, refreshRate)
;
growNumber();

This will make an element with id = "displayField" show the value as it grows.

Answer 2

Assuming your HTML is like this :

<div class="number"></div>

You javascript will look like :

var n = 0;
setInterval( function() { 
   n += 0.01;
   $('.number').html(n);
}, SLEEP_TIME_BEFORE_CHANGING_NUMBER_IN_MILLISECONDS);

Answer 3

Try this:

$.fn.ticker = function(options) {
    var o = $.extend({
        start: 0,
        max: 9000,
        step: .01,
        refreshRate: 50
    }, options);
    return this.each(function() {
        var elem = $(this);
        var decimals = o.step.toString().replace(/.*\./,'').length;
        var interval = window.setInterval(function() {
            elem.html(o.start.toFixed(decimals));
            o.start += o.step;
            if (o.start > o.max) {
                window.clearInterval(interval);
            }
        }, o.refreshRate);
    })
}

$('div').ticker();