자바스크립트 애니메이션 카운트 소스 > 팁자료실


자바스크립트 애니메이션 카운트 소스

페이지 정보

profile_image
작성자 GRT
댓글 0건 조회 93회 작성일 20-04-22 13:58

본문

SCRIPT

 
<script> 
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); 
    } 
}; 
 
window.onload = function(){ 
new numberCounter("counter3", 1235); 
new numberCounter("counter2", 1123456); 
new numberCounter("counter1", 6789); 
} 
</script> 
 
<p id="counter1"></p> 
<p id="counter2"></p> 
<p id="counter3"></p> 

댓글목록

게시물 검색

회원로그인

회원가입
사이트 내 전체검색
현재 접속자
2 명
오늘 방문자
8 명
어제 방문자
23 명
최대 방문자
69 명
전체 방문자
7,157 명
전체 게시물
42 개

본 홈페이지는 그누보드 관련 무료 공개된 팁과 무료 공개 스킨과 운영자가 수정한 스킨을 공유하는 사이트입니다.