숫자 업카운팅 애니메이션

실시간 그래프와 연동하면 꽤나 유용합니다.

/**스타일시트**/
#counter1, #counter2, #counter3 { font-family: arial; font-size: 40px; font-weight: bold; }

/**js**/
function numberCounter(target_frame, target_number) {
this.count = 0; this.diff = 0;
this.target_count = parseInt(target_number);
this.target_frame = document.getElementById(target_frame);
this.timer = null;
this.counter();
};
numberCounter.prototype.counter = function() {
var self = this;
this.diff = this.target_count - this.count;

if(this.diff > 0) {
self.count += Math.ceil(this.diff / 5);
}

this.target_frame.innerHTML = this.formatNumber(this.count);

if(this.count < this.target_count) {
this.timer = setTimeout(function() { self.counter(); }, 20);
} else {
clearTimeout(this.timer);
}
};
numberCounter.prototype.formatNumber = function(num) {
num+= '';
x = num.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;
};


window.onload = function(){
new numberCounter("counter3", 99999);
new numberCounter("counter2", 1123456);
new numberCounter("counter1", 15);
}

/**html(적용될 부분)**/
<span style='font-size:13px;font-weight:normal;'>첫번째</span> <span id="counter1" style='color:#3BA4EB;'></span>개
<span style='font-size:13px;font-weight:normal;'>두번째</span> <span id="counter2" style='color:#3BA4EB;'></span>개
<span style='font-size:13px;font-weight:normal;'>세번째</span> <span id="counter3" style='color:#3BA4EB;'></span>개