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

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

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

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

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

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

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

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

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

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

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

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

    1. 아 해결했습니다! 같은 곳에 넣었더니 작동하네요!
      이렇게 좋은 소스 공유해주셔서 정말 감사합니다 ㅠㅠ

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

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

  4. 제가 찾던 소스인데 이렇게 바로 찾을 수 있게 되어 좋네요 🙂
    감시하 잘 쓰겠습니다.

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *