[자바스크립트] 남은시간 타이머, 카운트다운 만들기

인증번호 입력 등.. 화면에서 남은 시간을 표시해줘야 할 경우가 있습니다.

아래 소스코드는 페이지에 진입 시 window.onload 이벤트가 발생하고 countdown 함수를 실행합니다. countdown 함수는 화면에 표시될 elementId 인자와 seconds 초를 받습니다. endTime 변수는 현재 시간에 seconds를 더한 값을 저장하며, 이 값은 카운트다운 종료 시간을 의미합니다. updateTimer 함수는 setInterval 함수를 사용하여 남은 시간을 업데이트하고, 이를 element.innerHTML로 표시합니다. 남은 시간이 없으면 "done"을 출력하고, 그렇지 않으면 setTimeout 함수를 사용하여 1초 후에 다시 updateTimer 함수를 호출합니다. 바로 확인 가능하시니, 응용해서 사용하시면 됩니다.

 

<script>
window.onload=function(){
	function countdown(elementId, seconds){
	  var element, endTime, hours, mins, msLeft, time;

	  function updateTimer(){
		msLeft = endTime - (+new Date);
		if ( msLeft < 0 ) {
		  console.log('done');
		} else {
		  time = new Date( msLeft );
		  hours = time.getUTCHours();
		  mins = time.getUTCMinutes();
		  element.innerHTML = "남은시간 : "+(hours ? hours + ':' + ('0' + mins).slice(-2) : mins) + ':' + ('0' + time.getUTCSeconds()).slice(-2);
		  setTimeout( updateTimer, time.getUTCMilliseconds());
		}
	  }

	  element = document.getElementById(elementId);
	  endTime = (+new Date) + 1000 * seconds;
	  updateTimer();
	}
	countdown('countdown', 300);	 
}
</script>

<span id="countdown"></span>

 

 

코드 결과 입니다.