[javascript] 자바스크립트 카운드다운 타이머 (countdown timer)

참고: https://dev.to/code_mystery/simple-countdown-timer-using-javascript-1jab

JavaScript 카운트 다운 타이머는 사이트를 최신 상태로 유지 하기 위해 다양한 전자상거래 사이트에서 사용되고 있습니다. 우리는 다양한 유형의 전자 상거래 사이트에서 제품이나 제안이 도착하기 전 일종의 카운드다운이 시작되는 것을 볼 수 있습니다. 이 포스트에서는 간단한 JavaScript 코드를 사용하여 카운트다운 타이머를 만들어보겠습니다.

TL;DR

전체 소스코드와 데모는 codepen에서 확인할 수 있습니다.

See the Pen countdown timer by shinyks (@shinyks) on CodePen.

디지털 시계를 만드는 방법을 알고있다면 이러한 프로젝트를 만들기 훨씬 쉬울 것 입니다. 여기서는 특정 날짜 또는 시간을 미리 예약할 수 있습니다. 그런 다음 JavaScript 코드의 도움으로 매 초 마다 해당 시간에서 현재 시간을 빼면 예약한 시간까지 남은 시간이 점점 줄어드는 것을 확인할 수 있습니다.

위의 예제에서 볼 수 있듯이 여기서는 웹 페이지의 배경에 #90cbf3를 사용했습니다. 이 페이지는 각각 일, 시간, 분, 초에 대한 네 개의 작은 상자가 있습니다. 먼저 HTML 및 CSS 파일을 만들어 보겠습니다.

Step 1: 카운드다운 타이머 기본 구조

HTML 코드는 id가 timer인 div 한 줄 입니다.

<div id="timer"></div>

CSS 코드에 "background: #90cbf3"을 지정했는데 원하는 다른 색상을 지정할 수도 있습니다.

body {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 0px;
    background: #90cbf3;
    font-family: sans-serif;
    font-weight: lighter;
}

Step 2: JavaScript 코드를 사용하여 활성화

우선 Date.parse() 메소드를 사용하여 특정 날짜를 설정합니다. 즉, 타운트다운할 d-day를 결정해야합니다.

const future = Date.parse("2024/01/01 00:00:00");

이제 "new Date()"를 통해 컴퓨터의 현재 시간을 가져옵니다. 여기서 가져온 시간은 어떠한 서버의 시간이 아니라 현재 사용 중인 기기의 로컬 시간입니다.

그 다음 현재 시간을 d-day 시간에서 뺀 다음 diff 변수에 저장합니다. 결과적으로 얼마 만큼의 시간을 카운트다운 해야하는지에 대한 값을 얻었습니다.

const now = new Date();
const diff = future - now;

이제 카운트다운 해야하는 전체 시간을 얻었으니 이를 JavaScript의 Math.floor() 메소드를 통해 일, 시간, 분, 초로 변환해야합니다.

• 1 초는 1000 밀리초 이므로 카운트다운 시간(diff)을 1000 으로 나눕니다.
• 1 분은 60 초 이므로 (1000 * 60) 으로 나눕니다.
• 한시간은 60 분 이므로 (1000 * 60 * 60) 으로 나눠야 합니다.
• 하루는 24 시간 이므로 (100 * 60 * 60 * 24)로 나눕니다.

const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor(diff / (1000 * 60 * 60));
const mins = Math.floor(diff / (1000 * 60));
const secs = Math.floor(diff / 1000);

const d = days;
const h = hours - days * 24;
const m = mins - hours * 60;
const s = secs - mins * 60;

위의 코드로 계산에 관련된 모든 것을 해결했습니다. 이제 이 값들을 웹 페이지에 보여줄 일만 남았습니다. 이를 위해 다음 코드와 같이 getElementById()와 innerHTML을 사용했고 그 안에 웹 페이지에서 볼 수 있도록 예쁘게 정리했습니다. 여기에 일, 시, 분, 초에 각각 span을 사용하여 텍스트를 추가했습니다.

document.getElementById("timer")
  .innerHTML =
  '<div>' + d + '<span>Days</span></div>' +
  '<div>' + h + '<span>Hours</span></div>' +
  '<div>' + m + '<span>Minutes</span></div>' +
  '<div>' + s + '<span>Seconds</span></div>';

마지막으로 매 1000 밀리초 마다 업데이트 하도록 setInterval()을 사용했습니다. 카운트다운 시간은 1 초 마다 바뀌어야 하기 때문에 이 시스템은 1 초 마다 업데이트 하도록 했습니다.

setInterval(updateTimer, 1000);

최종 JavaScript 코드

function updateTimer() {
    const future = Date.parse("2024/01/01 00:00:00");
    const now = new Date();
    const diff = future - now;

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const mins = Math.floor(diff / (1000 * 60));
    const secs = Math.floor(diff / 1000);

    const d = days;
    const h = hours - days * 24;
    const m = mins - hours * 60;
    const s = secs - mins * 60;

    document.getElementById("timer")
     .innerHTML =
     '<div>' + d + '<span>Days</span></div>' +
     '<div>' + h + '<span>Hours</span></div>' +
     '<div>' + m + '<span>Minutes</span></div>' +
     '<div>' + s + '<span>Seconds</span></div>';
}

setInterval(updateTimer, 1000);

Step 3: 시간 요소 크기 지정

이제 기본 CSS 코드를 사용하여 웹 페이지에 예쁘게 나열해 보겠습니다. 위의 사진에서 볼 수 있듯이 각각의 시간을 담고있는 작은 박스가 네 개 있습니다. 아래 코드를 사용하여 해당 상자를 만들고 배경을 #020b43으로 설정했습니다.

#timer {
    font-size: 3em;
    font-weight: 100;
    color: white;
    padding: 20px;
    width: 700px;
    color: white;
}

#timer div {
    display: inline-block;
    min-width: 90px;
    padding: 15px;
    background: #020b43;
    border-radius: 10px;
    border: 2px solid #030d52;
    margin: 15px;
}

Step 4: 텍스트 디자인

마지막으로 JavaScript 코드로 추가한 span에 디자인을 입혀보겠습니다. 다음 CSS를 사용하여 해당 텍스트의 크기, 색상 등을 지정했습니다.

#timer div span {
    color: #ffffff;
    display: block;
    margin-top: 15px;
    font-size: .35em;
    font-weight: 400;
}

관련 글

자바스크립트 querySelector vs getElementById

자바스크립트 타이머 setTimeout, setInterval