[js] D-day까지 남은 시간 구하기 / 밀리초(milliseconds), setInterval();

전에 다룬 D-day 게시글을 이어서 디데이까지 남은 시간을 구해봅니다..

 

우선 이 전에 inenerText 할 요소를 const로 선언도했었고, function도 생성했었습니다.

 

그대로 이어서 진행하겠습니다. 

 

일단 같은 function 안에 시(House), 분(Minutes), 초(Seconds)를 아래와 같이 지정해줍니다.

                     

const house =  Math.floor((timeTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = Math.floor((timeTime % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((timeTime % (1000 * 60))/1000);

 

dDay.getTime()에서 toDay.getTime() 빼준 값인 timeTime을 % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)으로 연산한 결과값을 Math.floor(소수점 이하 버림) 해준 것입니다. 

 

이렇게 지정한 후 시간, 분, 초가 출력되게 innerText부분을 수정합니다.

 

timeText.innerText = `${day}d ${house}h ${minutes}m ${seconds}s`;

 

그리고 마지막으로 function 밖에다가 지정된 시간마다 실행되도록 setInterval을 합니다. 참고로 밀리초(milliseconds) 단위로 시간 간격을 정할 수 있습니다. ex) setlnterval(function name, 1000);

 

dDayTime(); /* --------- 함수 실행 ------- */
setInterval(dDayTime, 1000);

 

 

이렇게 해서 1초(1000ms)마다 콜백함수(여기서 dDayTime)가 실행되는 시계를 완성했습니다. 다음 번에는 현재 시간 구하는 방법을 다뤄 보겠습니다.

 

 

 

* 콜백함수는 특정 작업이 완료되면 실행할 함수를 뜻입니다.