count – rootbox.co.kr

[js] 숫자를 카운트 되는 것처럼 보여주기

Posted on: February 27, 2012 | By: Kiwoong Jang – 24 Comments

아.. 제목을 뭐라고 해야할지 몰라서 보여주는 그대로를 글자로 옮겨봤습니다. 더 센스 있는 이름없나;.. 정해진 숫자만큼 카운트 업 되는 효과를 주는 스크립트입니다.

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);
        }
    };

new numberCounter("counter3", 99999);
new numberCounter("counter2", 1123456);
new numberCounter("counter1", 15);

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);

}

};

new numberCounter("counter3", 99999);

new numberCounter("counter2", 1123456);

new numberCounter("counter1", 15);

소스에서 보시는 것 처럼 숫자가 너무 클 경우 카운트 시간이 오래 걸릴 수 있어서 숫자 크기에 따른 이벤트 시간을 조절하기 위해서 남아있는 숫자를 …