window.onload=function() {

​

// this is the period of the base Interval in ms. 

// The counters will be aligned on this base period

Counter.basePeriod = 50 ;

​

// constructor of a Counter

// ! initializes the counter display.

function Counter(id, period_ms, max, initialValue) {

         this.element  = document.getElementById(id);

         this.period   = Math.ceil(period_ms / Counter.basePeriod) || 1;

         this.max      = max ;

         this.value    = initialValue || 0 ;

         this.last     = 0;

         this.element.value = (this.value);

         return this;

};

​

// called on each basePeriod tick

// updates the element every period until it reaches its max value.

Counter.prototype.tick = function() {

        this.last++;

        if (this.last == this.period  && 

                           this.value != this.max ) {

             this.value++;

             this.element.value = (this.value);

             this.last=0;

        } 

};

​

Counter.counters = []; 

​

Counter.start= function () {   

       function handleCounters() {

         for (var i=0; i< Counter.counters.length; i++) {  Counter.counters[i].tick();  }

       }

       Counter._interval = setInterval(handleCounters, Counter.basePeriod); 

};

​

Counter.add = function() {

    var newCounter = Object.create(Counter.prototype);

    Counter.counters.push( Counter.apply(newCounter, arguments) );

}

​

// -------------------------------

​

Counter.add('cnt1'      , 500  , 450 );

Counter.add('cnt2'      , 400  , 40 );

Counter.add('topCounter', 1000 , 5  );

​

Counter.start();

}