자바스크립트를 사용하여 현재 날짜를 받고, 이를 통해 디데이를 계산하는 방법에 대해 알아보도록 하겠습니다.

현재 날짜와 디데이 날짜 설정

디데이를 계산하려면 현재 날짜와 디데이 날짜를 알아야겠죠? 자바스크립트에서는 new Date()를 통해 현재 날짜와 시각을 받을 수 있습니다. 디데이 날짜는 올해의 크리스마스로 지정해보도록 하겠습니다.

function christmasClock() {
  const today = new Date();
  const year = today.getFullYear();
  const christmas = new Date(`${year}-12-25`);

디데이 계산하기

이제 오늘 날짜와 디데이 날짜의 차이를 계산하고 이를 디데이 형식으로 표현할 수 있습니다.

  const untilChristmas = new Date(christmas - today);
  const day = String(Math.floor(untilChristmas / (1000 * 3600 * 24)));
  const hour = String(
    Math.floor((untilChristmas / (1000 * 3600)) % 24)).padStart(2, "0");
  const minute = String(
    Math.floor((untilChristmas / (1000 * 60)) % 60)).padStart(2, "0");
  const second = String(Math.floor((untilChristmas / 1000) % 60)).padStart(2,"0");

날짜의 차이를 연산하면 밀리세컨드로 결과가 반환되는데요. 따라서 이를 다시 일, 시간, 분, 초로 변환해줍니다. padStart()는 해당 문자열의 자릿수를 지정하고 조건을 만족하지 않는 경우 특정 문자("0")를 추가하는 메소드입니다.

디데이 표현하기

이제 setInterval()을 통해 해당 함수를 1초마다 호출하고, 해당 결과를 HTML에 표시해줍니다.

const clockTitle = document.querySelector(".dDay");

function christmasClock() {
  const today = new Date();
  const year = today.getFullYear();
  const christmas = new Date(`${year}-12-25`);

  const untilChristmas = new Date(christmas - today);
  const day = String(Math.floor(untilChristmas / (1000 * 3600 * 24)));
  const hour = String(
    Math.floor((untilChristmas / (1000 * 3600)) % 24)).padStart(2, "0");
  const minute = String(
    Math.floor((untilChristmas / (1000 * 60)) % 60)).padStart(2, "0");
  const second = String(Math.floor((untilChristmas / 1000) % 60)).padStart(2,"0");
  clockTitle.innerText = `${day}일 ${hour}시 ${minute}분 ${second}초`;
}

setInterval(christmasClock, 1000);

<!DOCTYPE html>
<html>
  <head>
    <title>Time Until Christmas Eve<</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>🎄 크리스마스까지 남은 시간</h1>
    <h2 class="dDay">000일 00시 00분 00초</h2>
    <script src="src/index.js"></script>
  </body>
</html>

최종 결과물은 다음과 같습니다.

🎄 크리스마스까지 남은 시간

최종 결과물

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 배열 요소 랜덤 선택하기 (0)	2023.01.05
자바스크립트 클래스 설명 (0)	2022.11.15
자바스크립트 Set 설명 (0)	2022.11.01

자바스크립트 디데이 계산하기