카운트 숫자 (setInterval 아님)

숫자가 0부터 지정된 숫자까지 증가하는 스크립트 입니다.

setInterval 을 사용하지 않고

requestAnimationFrame() 을 사용한 방법입니다.

 

requestAnimationFrame() 은 웹페이지에서 애니메이션을 만드는 데 최적화된 자바스크립트 API 입니다.

응용하면 숫자 증가 뿐 아니라 UI 애니메이션에도 활용할 수 있습니다.

 

아래는 그 결과입니다.(숫자가 이미 60 이라면 새로고침을 해서 확인해 보기 바랍니다.)

 

requestAnimationFrame() 을 사용하면 브라우저가 매 프레임 마다 해당 기능을 실행하게 됩니다.

 

아래는 전체 코드 입니다.

<div id="number"></div>

<script>
let num = 0;

const number = () => {
	num ++;
  if(num <= 60){
  	document.querySelector('#number').innerText = num;
  }
  requestAnimationFrame(number);
}

requestAnimationFrame(number);
</script>

 

 

(광고 클릭은 제작에 큰 힘이 됩니다.)