[JavaScript] 자바스크립트로 크리스마스까지 남은 시간 계산하기

💻 Programming/JS, TS

[JavaScript] 자바스크립트로 크리스마스까지 남은 시간 계산하기

Jiwon() 2023. 6. 21. 14:09

나는 개인적으로 크리스마스의 분위기와 무드를 매우 매우 좋아하는 사람이다. 아직 한여름도 채 오지 않았지만, 자바스크립트를 이용하여 올해 크리스마스까지 남은 시간을 계산해 보자!

1. JavaScript를 사용하여 크리스마스까지 남은 시간 계산하기

먼저 HTML을 간단하게 작성하고, 자바스크립트 코드를 작성해봤음! 자바스크립트 코드블럭 내에 순서 단계를 주석으로 적어두었고, 자세한 설명은 코드블럭 하단에서 풀어서 적어보려고 한다.

<!DOCTYPE html>
<html>
  <head>
    <title>Santa is coming!<</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Santa is coming!</h1>
    <h2 class="countdown"></h2>
    <script src="src/index.js"></script>
  </body>
</html>

// 1) 시간을 표시할 HTML 요소 지정
const countdownClock = document.querySelector(".countdown");

// 2) 함수 작성하기
const waitingXmas = () => {
  // (1) 오늘 날짜와 올해 크리스마스 날짜 구하기
  const today = new Date();
  const currentYear = today.getFullYear();
  const xmas = new Date(currentYear, 11, 25);

  // (2) 크리스마스와 오늘 날짜 차이 구하기
  const diff = Math.abs(xmas - today);

  // (3) 일, 시, 분, 초 단위에 맞추어 표현
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // (4) innerHTML로 화면에 표현
  const countdown = `${days}d ${hours}h ${minutes}m ${seconds}s`;
  countdownClock.innerHTML = countdown;
};

// 3) 초기화 후 1초 단위로 다시 함수를 호출하여 리셋
waitingXmas();
setInterval(waitingXmas, 1000);

1) 시간을 표시할 HTML 요소 지정

Document.querySelector()를 사용하여 HTML의 h2 요소를 지정한다.
Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환 (단, 일치하는 요소가 없으면 `null` 반환)

2) 함수 작성

(1) 오늘 현재 날짜와 올해 크리스마스 날짜 구하기

그냥 Date()로 호출하면 안되나? 앞에 new 연산자를 붙여서 new Date()로 작성하는 이유

새로운 Date 객체를 생성하는 방법은 new 연산자를 사용하는 것이 유일합니다. now = Date();처럼 Date를 직접 호출하면 새로운 Date 객체가 아니라 문자열을 반환합니다.

new Date()는 Date 객체, Date()는 문자열로 반환되는 것을 확인할 수 있다.

Date.prototype.getMonth() : 현지 시간 기준 월을 나타내는 0에서 11 사이의 정수를 나타낸다. 즉, 0은 1월, 1은 2월... 11은 12월을 의미함에 유의할 것!

(2) 크리스마스와 오늘 날짜 차이 구하기

const diff = Math.abs(xmas - today)
- (xmas - today)를 통해 구한 diff 값은 크리스마스 날짜에서 오늘 날짜를 뺀 값을 얻게 되고, 이 값은 두 날짜 사이의 시간 간격을 나타낸다. (이 시간 간격은 밀리초 단위로 계산됨)
- Math.abs() 함수를 사용하여 해당 시간 간격의 절댓값을 계산한다. 절댓값을 취하면 항상 양수가 되고, diff 변수에는 크리스마스와 오늘 날짜 사이의 절대적인 시간 간격이 저장된다.
- 이렇게 구한 diff 값은 밀리초 단위이므로, 이 값을 이용하여 일, 시, 분, 초 단위로 변환하여 카운트다운을 표시할 수 있음

(3) 일, 시, 분, 초 단위에 맞추어 표현

자바스크립트에서는 시간을 보통 밀리초(ms) 단위로 계산한다. 1s = 1,000ms

diff 변수에는 크리스마스와 오늘과의 시간 차이가 밀리초 단위로 저장되어 있으므로, 이 밀리초를 각각 초, 분, 시, 일 단위에 맞춰서 변환해주어야 함

const seconds = Math.floor((diff % (1000 * 60)) / 1000)
- diff % (1000 * 60) : 밀리초 단위에서 분 단위를 초과한 나머지 시간을 구함
- diff % (1000 * 60) / 1000 : 나머지 시간을 1000으로 나누어 밀리초 단위에서 초 단위로 변환
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
- diff % (1000 * 60 * 60) : 밀리초 단위에서 시간 단위를 초과한 나머지 시간을 구함
- diff % (1000 * 60) / (1000 * 60) : 시간 단위를 분 단위로 변환

(4) innerHTML로 화면에 표현

innerHTML을 사용하여 처음에 Document.querySelector로 지정해뒀던 HTML <h2> 요소에 시간을 일, 시, 분, 초로 나누어서 표시한다.

3) 초기화? 그리고 setInverval()

waitingXmas(); // 초기화
setInterval(waitingXmas, 1000);

처음 페이지가 로드될 때 `waitingXmas()` 함수를 실행하면 현재 시간과 크리스마스까지의 남은 시간이 계산되어 `countdownClock` 요소에 표시된다. 이것은 페이지가 열릴 때 사용자에게 초기 정보를 제공하는 역할을 함.
그 후에는 `setInterval(waitingXmas, 1000);`을 사용하여 `waitingXmas()` 함수가 1초마다 주기적으로 호출되도록 해서 남은 시간이 실시간으로 업데이트한다.
정리하면, `waitingXmas()`를 실행해서 초기화하는 것은 페이지가 최초 로딩될 때 최초로 남은 시간을 계산하고 표시하는 역할을 한 번만 수행하는 것이라고 이해하면 된다. 그 이후로는 `setInterval()`을 통해 주기적으로 업데이트가 이루어짐.
setInterval(waitingXmas, 1000) :자바스크립트에서는 밀리초 단위를 사용하므로 1,000ms, 즉 1s 간격으로 업데이트 도하도록 입력해준다.

2. 시, 분, 초를 2자리 수로 표현하기

예를 들면, 1h 5m 8s ➡️ 01h 05m 08s 형식으로 표현하려고 함!

1) String.prototype.padStart()

//String().padStart(2, '0')
const days = String(Math.floor(diff / (1000 * 60 * 60 * 24))).padStart(2, '0');
const hours = String(Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0');
const minutes = String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
const seconds = String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, '0');

padStart() 메서드란?
현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용된다.

str.padStart(targetLength [, padString])

targetLength : 목표 문자열 길이. 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환해준다.
padString : 현재 문자열에 채워넣을 다른 문자열. 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음. 기본값은 " "이다.

3. 올해 크리스마스가 지나면 내년 크리스마스를 기준으로 카운트다운

  let xmas
  if (today.getMonth() === 11 && today.getDate() > 25) {
    xmas = new Date(currentYear + 1, 11, 25);
  } else {
    xmas = new Date(currentYear, 11, 25);
  }

  const diff = xmas - today;

xmas는 재할당이 가능하도록 const가 아닌 let으로 선언
if문 사용
- 조건 : 오늘 날짜가 12월(today.getMonth() === 11), 그리고(&&) 25일이 지나면
- 반환 : 카운트 하는 기준이 되는 xmas의 연도를 내년(currentYear + 1)으로 변경
- else 반환 : 그렇지 않으면 그냥 currentYear, 12월 25일 그대로 반환
이 경우에는 xmas - today 사이에 음수가 나오지 않으니 Math.abs 사용할 필요가 없게 됨!

4. 최종 완성 코드

const countdownClock = document.querySelector(".countdown");

const waitingXmas = () => {
  const today = new Date();
  const currentYear = today.getFullYear();
  
  let xmas;
  if (today.getMonth() === 11 && today.getDate() > 25) {
    xmas = new Date(currentYear + 1, 11, 25);
  } else {
    xmas = new Date(currentYear, 11, 25);
  };

  const diff = xmas - today;

  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = String(
    Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  ).padStart(2, "0");
  const minutes = String(
    Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
  ).padStart(2, "0");
  const seconds = String(Math.floor((diff % (1000 * 60)) / 1000)
  ).padStart(2, "0");

  const countdown = `${days}d ${hours}h ${minutes}m ${seconds}s`;
  countdownClock.innerHTML = countdown;
};

waitingXmas();
setInterval(waitingXmas, 1000);

간단할 것이라 생각했는데 생각보다 공부해 볼 요소들이 많아서 따로 정리해봤다.

틀린 내용, 참고할 내용이 있다면 댓글로 알려주세요!

참고 사이트

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

저작자표시