D-Day 만들기!

크리스마스 디데이를 만들어 보자!

const clockTitle = document.querySelector("h2#dDay");
 
function difDday() {
  const christ = new Date("2023-12-25");
  const nowDay = new Date();
  const minus = christ - nowDay;
 
  const minusDay = String(Math.floor(minus / (1000 * 60 * 60 * 24))).padStart(
    2,
    "0"
  );
  const minusHours = String(
    Math.floor((minus / (1000 * 60 * 60)) % 24)
  ).padStart(2, "0");
  const minusMinutes = String(Math.floor((minus / (1000 * 60)) % 60)).padStart(
    2,
    "0"
  );
  const minusSeconds = String(Math.floor((minus / 1000) % 60)).padStart(2, "0");
 
  clockTitle.innerText = `${minusDay}d ${minusHours}h ${minusMinutes}m ${minusSeconds}s`;
}
difDday();
setInterval(difDday, 1000);

fucntion 내부의 코드들을 살펴보겠다.

const christ = new Date("2023-12-25");
const nowDay = new Date();
const minus = christ - nowDay;

• 크리스마스의 날짜를 불러와 christ변수에 담고
• 지금 날짜를 nowDay 변수에 담아 두 날짜의 차이를 minus 변수에 담는다.
• 여기서 console.log(minus)를 하면 굉장히 큰 숫자가 나온다. 이건 밀리 세컨드로 1초=1000밀리초 이기 때문에 그 숫자에서 날짜와 시간을 구해야 한다.

const minusDay = String(Math.floor(minus / (1000 * 60 * 60 * 24))).padStart(
    2,
    "0"
  );
  const minusHours = String(
    Math.floor((minus / (1000 * 60 * 60)) % 24)
  ).padStart(2, "0");
  const minusMinutes = String(Math.floor((minus / (1000 * 60)) % 60)).padStart(
    2,
    "0"
  );
  const minusSeconds = String(Math.floor((minus / 1000) % 60)).padStart(2, "0");

• minus / (1000 * 60 * 60 * 24) : date(일)를 구하는 식은 밀리세컨드가 1/1000초이니까 minus에 나누기 1000을 해 밀리 세컨드에서 초 단위로 바꿔주고 **나누기 60(초)**를 해서 분 단위로 바꾼 후 **나누기 60(분)**을 해 시 단위로 바꾼 뒤 **나누기 24(시)**를 하면 날짜가 나온다.
• Math.floor() : 위 계산을 하고 나면 소수점이 엄청 길다. 그 소수점을 버린 값을 구해야 하기 때문에 소수점 내림 함수를 사용한다.
• String() : padStart()를 사용하려면 문자열이어야 하기 때문에 String으로 감싸 숫자를 문자열로 바꿔준다.
• padStart() : 선택적인 함수이지만, 이 함수를 사용하지 않으면 7시8분이면 7h 8m 이런 형태로 반환이 된다. 이 함수를 사용하면 07h 08m 으로 조금 더 깔끔하게 만들 수 있다. padStart() 함수는 문자열의 길이를 조정해 기존 문자열의 앞과 뒤에 원하는 문자를 붙일 수 있다. padStart(2, ”0”)이면 두 글자로 만들어준 후 빈 공간에 “0”을 삽입해주는 것인데 padStart 이기 때문에 시작 부분에 “0”을 삽입하고, padEnd이면 끝 부분에 “0”을 삽입한다. (padding을 추가한다고 보면 된다.)

clockTitle.innerText = `${minusDay}d ${minusHours}h ${minusMinutes}m ${minusSeconds}s`;

• 미리 HTML에 태그를 만들어 놓고 그 태그에 변수들을 넣는다(innerText).

difDday();
setInterval(difDday, 1000);

• difDday() : 함수를 바로 실행하지 않으면 setInterval(difDday, 1000) 로 인해 1초 뒤에 시간이 업데이트 된다. 창을 열자마자 시간이 떠야 하기 때문에 바로 선언을 한다.
• setInterval(difDday, 1000) : setInterval은 ‘매번’ 일어나야 하는 무언가를 말한다. 시계는 매 초마다 업데이트 되니 앞서 만든 difDday 함수가 매 초마다 업데이트 되어야 한다.