[javascript] javascript count up function 카운트 업 함수

[javascript] javascript count up function 카운트 업 함수

 

// 숫자 카운터 이팩트 
function numberCounter(target_frame, target_number, target_frame2, target_number2) { 
  this.count = 0;  
  this.count2 = 0;  
  this.diff = 0; 
  this.diff2 = 0; 
  this.target_count = parseInt(target_number); 
  this.target_count2 = parseInt(target_number2); 
  this.target_frame = document.getElementById(target_frame); 
  this.target_frame2 = document.getElementById(target_frame2); 
  this.timer = null; 
  this.timer2 = null; 
  this.counter(); 
  this.counter2(); 
}; 

function counter() { 
  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); 
  } 
} 

function counter2() { 
  var self = this; 
  this.diff2 = this.target_count2 - this.count2; 

  if(this.diff2 > 0) { 
  self.count2 += Math.ceil(this.diff2 / 5); 
  } 

  this.target_frame2.innerHTML = this.count2.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); 

  if(this.count2 < this.target_count2) { 
  this.timer2 = setTimeout(function() { self.counter2(); }, 20); 
  } else { 
  clearTimeout(this.timer2); 
  } 
}

위에 numberCounter 에서 호출하는 counter, counter2 를 테스트하면서 수정해서 사용했습니다.

참고하시구요 도움이 되시길!!