[JavaScript] 디데이(D-Day) 구하기

웹 프로그래밍/JavaScript
2022. 12. 19. 18:57

개요

JavaScript 에서 D-Day 를 구현하는 방법에 대해서 공부 진행합니다.
예를들어, 현재 날짜가 2022-12-19 라고 하였을 때, 2022-12-31 을 입력하게 되었을 경우 해당 날짜까지 얼마의 시간이 남았는지 D-Day 를 구하는 예제 코드를 구현해 봅니다.
HTML 에서는 간단히 Input 태그와 버튼 태그를 통해 값을 입력하여 D-Day 를 표시해 봅니다.

HTML

예제로 사용하는 HTML 코드는 다음과 같습니다.
년,월,일 을 입력하는 3개의 input 태그가 있고, 입력된 값을 통해 버튼을 클릭하게 되면 D-Day 를 구해서 표시해주는 내용입니다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="target-year-input" class="target-input" />
    <input id="target-month-input" class="target-input" />
    <input id="target-date-input" class="target-input" />
    <button id="my-button">버튼</button>

    <div>
        <span id="d-day-counter"></span>
    </div>
    <script src="./index.js"></script>
</body>

</html>

위 HTML 코드를 작성 후, 브라우저에서 확인하게 되면 아래와 같이 보입니다.

JavaScript

다음은 D-Day 를 구현하는 JavaScript 코드 부분입니다.
counterMaker 함수와 dateFormatMaker 2개의 함수가 있습니다.
dateFormatMaker 함수는 HTML 코드의 년,월,일 Input 태그의 값을 가져와 yyyy-mm-dd Date 포맷으로 변경해주는 함수입니다.
counterMaker 함수는, 년,월,일 기준으로 D-Day 카운트를 실제로 계산해서 보여주는 함수입니다.

const counterMaker = function () {
    const nowDate = new Date();
    const dateFormat = dateFormatMaker();
    const targetDate = new Date(dateFormat).setHours(0, 0, 0, 0); // 자정 기준
    const remaining = (targetDate - nowDate) / 1000;

    const remainingDate = Math.floor(remaining / 3600 / 24);
    const remainingHours = Math.floor(remaining / 3600) % 24;
    const remainingMinutes = Math.floor(remaining / 60) % 60;
    const remainingSeconds = Math.floor(remaining) % 60;

    const dDayCounter = `남은 시간 : ${remainingDate}일 ${remainingHours}시 ${remainingMinutes}분 ${remainingSeconds}초`;

    return dDayCounter;
};

const dateFormatMaker = function () {
    const inputYear = document.querySelector("#target-year-input").value;
    const inputMonth = document.querySelector("#target-month-input").value;
    const inputDate = document.querySelector("#target-date-input").value;

    // 템플릿 리터럴
    const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`;

    return dateFormat;
};

const spanTag = document.querySelector("#d-day-counter");
const myButton = document.querySelector("#my-button");
myButton.addEventListener("click", () => (spanTag.innerHTML = counterMaker()));

실행 결과

위 코드를 실행하게 되면, 다음과 같이 현재 날짜 기준으로 D-Day 카운트가 출력되어 보여지는 것을 확인할 수 있습니다.

728x90

저작자표시 비영리

'웹 프로그래밍 > JavaScript' 카테고리의 다른 글

VS Code 에서 JavaScript 실행하기 (0)	2023.05.19
[JavaScript] JavaScript – DOM 요소 선택하기 (0)	2020.12.31
[JavaScript] JavaScript – Array를 반복적으로 참조하는 메서드 (0)	2020.12.30
[JavaScript] JavaScript – Array 메서드 사용 방법 (0)	2020.12.29
[JavaScript] JavaScript – reduce 함수 (0)	2020.12.29