d-day 계산하기

• new Date() : 현재 날짜와 시간를 가진 객체 생성자
• new Date(년, 월 - 1, 일) : 매개변수 값으로 날짜를 가진 객체가 생성, 원하는 날짜를 생성하기 위해서는 월은 -1을 해주어야 한다.
• getTime() : 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값(1/1000초(millisecond))을 반환, 1970 년 1 월 1 일 00:00:00을 기준으로 하여를 밀리초를 나타낸다.
  즉, 1970년 1월1 일 00:00:00 UTC'의 getTime() 값은 0이고, '1970년 1월 1일 00:00:01 UTC'의 getTime() 값은 1000이다.
• Math.floor() : 주어진 수와 같거나 작은 수 중에서 가장 큰 정수를 반환하는 함수
  오늘 날짜까지 포함시키려면 Math.ceil() 메서드를 사용한다.
• Date().getFullYear() : 2021처럼 4자리의 연도를 얻을 수 있는 함수
• setInterval() : 인수로 전달받은 함수를 지정해 둔 일정한 간격으로 실행할 수 있게 해주는 함수

• 1초 = 1,000(msc)
• 1분(60초) = 1000 * 60
• 1시간(60분) = 1000 60 60
• 1일(60분24) = 1000 60 60 24

const clockTitle = document.querySelector(".js-clock");

function time() {
  const now = new Date().getTime();      // 현재날짜 
  const christmas = new Date(2022, 11, 25).getTime();    // 크리스마스 날짜
  const msc = christmas - now;     //크리스마스까지 남은 날짜(밀리세컨), 시간이 지날수록 msc 값은 줄어든다. 

// 밀리세컨을 초, 분, 시간, 일로 변환해준다. 
  const sec = Math.floor((msc / 1000) % 60);     //초
  const min = Math.floor(msc / (1000 * 60)) % 60;   //분
  const hour = Math.floor((msc / (1000 * 60 * 60)) % 24);   //시간
  const day = Math.floor(msc / (1000 * 60 * 60 * 24));    //일

  clockTitle.innerHTML = `${day}d ${hour}h ${min}m ${sec}s`;
}

time();                        // 최초 시간표현 함수 실행 
setInterval(time, 1000);     // 1초마다 time 함수 실행 

//solution code

const clockTitle = document.querySelector(".js-clock");

function getTime() {
  const xmasDay = new Date(`${new Date().getFullYear()}-12-25:00:00:00+0900`);
  const now = new Date();
  // This is in milisecondsx
  const difference = new Date(xmasDay - now);
  const secondsInMs = Math.floor(difference / 1000);
  const minutesInMs = Math.floor(secondsInMs / 60);
  const hoursInMs = Math.floor(minutesInMs / 60);
  const days = Math.floor(hoursInMs / 24);
  const seconds = secondsInMs % 60;
  const minutes = minutesInMs % 60;
  const hours = hoursInMs % 24;
  const daysStr = `${days < 10 ? `0${days}` : days}d`;
  const hoursStr = `${hours < 10 ? `0${hours}` : hours}h`;
  const minutesStr = `${minutes < 10 ? `0${minutes}` : minutes}m `;
  const secondsStr = `${seconds < 10 ? `0${seconds}` : seconds}s`;
  clockTitle.innerHTML = `${daysStr} ${hoursStr} ${minutesStr} ${secondsStr}`;
}

getTime();
setInterval(getTime, 1000);