[자바스크립트] 숫자가 카운팅되도록 보여지는 효과

가끔 웹들을 보면 숫자가 카운팅 되면서 올라가는 듯한 

효과를 넣은 홈페이지들이 있습니다

아래 예제를 참고하세요~~

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.count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    
    if(this.count < this.target_count) {
        this.timer = setTimeout(function() { self.counter(); }, 20);
    } else {
        clearTimeout(this.timer);
    }
};

See the Pen 숫자가 차례로 카운팅 by DeokHwan (@deokhwan) on CodePen.

자바스크립트를 잘 활용하면 멋진 웹디자인이 나올수 있네요~ ^^