[JS] D-day 실시간 계산

 

 

D-day 실시간으로 계산 후 출력하는 프로그램

 

 

  JS코드

let future = new Date();
let outspace = document.querySelector('span');
future.setDate(future.getDate() + 3);
future.setHours(0);
future.setMinutes(0);
future.setSeconds(0);
future.setMilliseconds(0);

function timeCalculate() {
    setInterval(() => {
        const today = new Date();
        let times = future.getTime() - today.getTime(),
            resultDay = Math.floor((times / 1000 / 60 / 60 / 24)),
            resultHour = Math.floor(times / 1000 / 60 / 60) % 24,
            resultMin = Math.floor(times / 1000 / 60) % 60,
            resultSec = Math.floor(times / 1000) % 60;

        outspace.innerHTML = (`${resultDay}일 ${resultHour}시 ${resultMin}분 ${resultSec}초 남음`);
    }, 1000);

};

timeCalcuate();

 

 

 

부분 분석 1)

let future = new Date();
let outspace = document.querySelector('span');
future.setDate(future.getDate() + 3);
future.setHours(0);
future.setMinutes(0);
future.setSeconds(0);
future.setMilliseconds(0);

 

 

 

  남은 시간을 알고 싶은 날짜를 Javscript 내장객체의 Date를 사용한다.

 

  3~7행: future변수는 현재 지금 프로그램이 돌아가는 시간을 담고 있었지만, Date().set 메서드들을 통해 3일 후 0:00:00:0000 시간으로 바꾸어준다.

 

 

function timeCalculate() {
    setInterval(() => {
        const today = new Date();
        let times = future.getTime() - today.getTime(),
            resultDay = Math.floor((times / 1000 / 60 / 60 / 24)),
            resultHour = Math.floor(times / 1000 / 60 / 60) % 24,
            resultMin = Math.floor(times / 1000 / 60) % 60,
            resultSec = Math.floor(times / 1000) % 60;

        outspace.innerHTML = (`${resultDay}일 ${resultHour}시 ${resultMin}분 ${resultSec}초 남음`);
    }, 1000);

};

 

 

  timeCalcuate 함수의 기능은  알고 싶은 시간 - 현재 시간을 밀리세턴드로 계산  후, 뺀 값으로 남은 날짜, 시간, 분, 초를 구하는 기능을 한다. 전체적으로 이 기능을 브라우저에서 1초마다 갱신하기 위해 setInterval메서드를 사용한다. 

 

  참고로 today 변수는 1초마다 함수가 동작하니 today 역시 계속 오늘을 날짜를 구한다. 만약, today가 setInterval 메서드 내에 없었으면, 한번 구한 현재시간으로 계속 계산하니 변화가 없을 거이다.

 

 

 

 

 

 

 

 

 

 setInterval 메서드로 인해 1초마다 알고싶은 날짜의 남은 시간이 계속 최신화된다.

 

 

 

See the Pen Untitled by one혁 (@one-the-decoder) on CodePen.