Javascript - Date 시계 만들기

개발자 YD 2021. 4. 21. 16:00

이번 글에서는 이전에 학습한 Javascript의 Date() 객체를 활용해서 문자 시계(Text Clock)를 만들어 보겠습니다. 자바스크립트의 내장 객체인 Date와 타이머 함수인 setInterval()을 사용하면 년, 월, 일, 시간을 보여주는 시계를 만들 수 있습니다.

문자 시계(Text Clock) 만들기

화면에 날짜와 시간을 표시하기 위해서는 Date객체의 날짜 및 시간 데이터 값을 가져오는 함수가 필요하고 일정 시간을 주기로 화면에 보이는 값을 갱신하기 위해서는 setInterval() 함수를 사용합니다. 이렇게 Date 객체의 날짜 및 시간 제공 함수와 특정 주기 반복 실행 함수를 가지고 쉽게 문자 시계(Text Clock)를 만들 수 있습니다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>문자 시계(Text Clock)</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
        .frame {
            display: inline-block;

            padding: 8px;

            border-radius: 8px;
            background-color: #000000;
        }

        .clock {
            color: #ffffff;
            font-family: 'Roboto', sans-serif;
            text-align: center;
            box-sizing: border-box;
        }

        .large_text {
            font-size: 75px;
        }

        .small_text {
            font-size: 20px;
        }

        .date_box {
            font-size: 15px;
        }

        @keyframes blink {
            50% {
                opacity: 0.0;
            }
        }

        .colon {
            font-size: 55px;
            vertical-align: text-bottom;
            animation: blink 1s step-start 0s infinite;
        }
    </style>
</head>

<body>
    <div class="frame">
        <div class="clock">
            <div class="time_box">
                <span id="hours" class="large_text"></span>
                <span class="colon">:</span>
                <span id="minute" class="large_text"></span>
                <span id="seconds" class="small_text"></span>
            </div>
            <div class="date_box">
                <span id="year"></span>
                <span>.</span>
                <span id="month"></span>
                <span>.</span>
                <span id="date"></span>
                <span id="day"></span>
            </div>
        </div>
    </div>
    <script>
        const watchClock = () => {
            function leftPad(number) {
                if (number < 10) {
                    return `0${number}`;
                }

                return `${number}`;
            };

            function setText(selector, text) {
                const targetElement = document.querySelector(selector);

                if (!targetElement) {
                    return;
                }

                targetElement.innerText = text;
            };

            function getDayText(index) {
                const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
                return days[index];
            };

            const present = new Date();


            const hour = leftPad(present.getHours());
            const minute = leftPad(present.getMinutes());
            const seconds = leftPad(present.getSeconds());

            setText('#hours', hour);
            setText('#minute', minute);
            setText('#seconds', seconds);

            const year = present.getFullYear();
            const month = leftPad(present.getMonth() + 1);
            const date = leftPad(present.getDate());
            const day = getDayText(present.getDay());

            setText('#year', year);
            setText('#month', month);
            setText('#date', date);
            setText('#day', day);
        };

        watchClock();

        const clockInterval = setInterval(watchClock, 1000);
    </script>
</body>

</html>

예제로 작성한 코드는 첨부파일로도 제공하고 있습니다. 위의 코드를 가져다가 사용하시는게 불편하시다면 첨부파일을 다운로드해서 사용하시면 됩니다.

clock.html

0.00MB

예제 코드 내용 중 자바스크립트와 관련 된 내용을 설명하면 아래와 같습니다.

- watchClock(): Date 객체를 만들어서 날짜 및 시간 데이터를 가져와 화면에 그립니다.

- leftPad(): 문자 형식을 맞추기위해 1자리 수의 값을 입력받으면 왼쪽에 '0' 문자를 채워 반환합니다.

- setText(): DOM Selector를 사용해 텍스트를 갱신합니다.

- getDayText(): index를 기준으로 요일 이름을 반환합니다.

- setInterval(): 인자로 전달 받은 함수(식)를 일정 주기로 실행시킵니다.

일상에서 사용하는 실제 시계처럼 보이기 위해 CSS를 사용해 Blink 애니메이션 효과도 추가하였습니다.

See the Pen Clock by yongdae (@yongdae) on CodePen.

Codepen을 사용해 예제 코드를 테스트 할 수 있도록 하였습니다.