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

by

아.. 제목을 뭐라고 해야할지 몰라서 보여주는 그대로를 글자로 옮겨봤습니다. 더 센스 있는 이름없나;..

정해진 숫자만큼 카운트 업 되는 효과를 주는 스크립트입니다.

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

소스에서 보시는 것 처럼 숫자가 너무 클 경우 카운트 시간이 오래 걸릴 수 있어서 숫자 크기에 따른 이벤트 시간을 조절하기 위해서 남아있는 숫자를 5로 나누어 숫자가 클 때는 좀 빠르게 진행되도록 했습니다.

http://jsfiddle.net/rootbox/uL4J3/ 에서 테스트 해보실 수 있습니다.

24 thoughts on “[js] 숫자를 카운트 되는 것처럼 보여주기”

  1. 오오오오오오오오오오오
    신기하네요!!!
    제가 신기라서 신기한게 아니고 (죄송;;;;)

    대단하세요 흑 전 언제쯤 이런거 혼자서 작성할수 있을런지 ㅠ.ㅠ

  2. Pingback: [js] 숫자 포멧 – 천단위 콤마(,) 붙이기 « rootbox

  3. 안녕하세요
    소스 만드시느라 너무 고생 많으셨어요 ㅠㅠㅠㅠ
    혹시 써도 될지 여쭙고자 연락 드립니다.ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ
    답변 부탁드릴게요 감사합니다.

  4. 안녕하세요! 너무 좋은소스라 제가 응용하고싶은데
    소스를 가져와서 썻더니 작동을 안하더라구요 ㅠㅠ

    #counter1, #counter2, #counter3 { font-family: arial; font-size: 40px; font-weight: bold; }

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

    혹시 따로 뭐가 들어가야 하는건가요?ㅠㅠ

      • 안녕하세요!
        질문 하나 드려도 될까요…?
        제가 웹디라 스크립트 지식이 거의 없어 응용을 못하고 있습니다..ㅠ.ㅠ
        제가 이 소스를 슬라이드에 넣으려고 하는데
        첫 슬라이드에 넣으면 아주 잘 작동되는데
        다른 슬라이드에 넣으면 이미 작동 되어서 그런지 변화가 없습니다..
        해당 슬라이드에 마우스 오버시에 이벤트가 작동되게 해야할 것 같은데
        어떻게 수정하면 될까요…..? 염치 불구하고 여쭤봅니다..ㅠ_ㅠ

    • 아.. 제 블로그지만 저도 잘 안 들어오고 있어서 코멘트 주신지 몰랐네요.
      문의는 메일로 주시면 바로 회신 드릴 수 있는데 ㅠㅠ..
      500 단위 증가는 13번째 라인을 변경하면 적용하실 수 있어요.
      답이 너무 늦어서 도움이 안 되겠죠? 다른 궁금하신 점 있으시면 메일 남겨주세요 🙂

  8. 정말 좋은 소스 감사합니다. 제가 왕초보라… 근디… 궁금한 부분이 있는데요

    this.timer = null; 이 부분이요…

    timer가 속성인거 같은데 검색해도 안나오더라구요.. 이게 뭘지 궁금합니다..
    해당 함수의 타이머 속성에 null을 집어 넣는건데. null을 집어 넣는 이유가 뭘까요? 변수를 정의하고 숫자나 문자열을 넣기위해서는 0, ‘ ‘이렇게 넣어서 초기화 해야된다는 걸로 알고 있꺼든요.. 근데 null은…?? ㅎㅎ

  9. 아… timer라는 이름으로 임의의 속성을 지정한 거군요. null도 이 속성에 넣기 위한 밑작업이구요.. 곰곰히 생각해보니 이해가 갑니다!!

  10. 유용한 소스 공유해주셔서 정말 감사합니다 ~~~
    저 효과가 계속 무한반복 되게 할순없을까요 ㅠㅠ?

  13. new numberCounter(“counter)가 3개까진 정상적으로 작동하는데 4개 5개 만들면 그 이상부터는 안되네요 ㅠㅠ 왜그런걸까요

Comments are closed.