javascript – Page 5 – rootbox.co.kr

Home » javascript

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

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

[js] getElementsByClassName

Posted on: December 23, 2011 | By: Kiwoong Jang – 6 Comments

jQuery 같은 프레임웍을 쓰지 않는다면 class name 으로 dom 셀렉팅을 할 수 없습니다. 지난번 javascript 스터디를 통해서 function 타입으로 제작하는 방법을 설명했었는데 조금 더 발전시켜 document 객체에 prototype으로 선언해 getElementById 와 같은 매서드의 형식으로 사용할 수 있도록 제작해봤습니다. 안타깝게도 Document 객체에 prototype 으로 선언하는 것이 …

[js] javascript에서 지역변수와 전역변수

Posted on: July 5, 2011 | By: Kiwoong Jang – 4 Comments

javascript에서 변수선언을 할 때 var 를 쓰고 안쓰고로 전역변수/지역변수를 결정지을 수 있다는걸 알고 계셨나요? 일반적으로 var 를 기본적으로 써왔고, javascript 에서 전역변수를 사용할 일이 많지 않다보니 모르시는 분들이 많은 것 같습니다. 얼마전 필요에 의해서 테스트 코드를 작성했다가 그냥 버리기 아까워서 jsbin을 설치하는 노가다를 하면서;; 정리 …