無제

Vanilla Javascript_실시간 디데이 카운트다운 본문

<script>

Vanilla Javascript_실시간 디데이 카운트다운

yo-u-loo 2026. 6. 15. 16:20

 

Vanilla-JS-​time-counter

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
    <title>실시간 디데이 카운트다운 예제-https://www.youtube.com/watch?v=hbQrcrslXEo&list=PLpK-F7ihqVc39kaC4-77snhSpxa5umFRg&index=16
    </title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
    <link rel="stylesheet" href="js7.css">
    <script src="script.js"></script>
</head>

<body>
    <main>
        <div class="container">
            <h1>Dark night is comming</h1>
            <h2>const jinuk Happiness = "your dark night"</h2>

            <div class="count">
                <div class="co">
                    <span id="days">00</span>
                    DAYS
                </div>
                <div class="co">
                    <span id="hours">00</span>
                    HOURS
                </div>
                <div class="co">
                    <span id="minutes">00</span>
                    MINUTES
                </div>
                <div class="co">
                    <span id="seconds">00</span>
                    SECONDS
                </div>
            </div>
        </div>
    </main>

    <script>

        let count = new Date("8 19, 2026 00:00:01").getTime();
        let x = setInterval(function () {
            let now = new Date().getTime();
            let d = count - now;

            let days = Math.floor(d / (1000 * 60 * 60 * 24));
            let hours = Math.floor((d % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = Math.floor((d % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = Math.floor((d % (1000 * 60)) / 1000);

            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;
            document.getElementById("seconds").innerHTML = seconds;

            if (d <= 0) {
                clearInterval(x);
            }
        }, 1000);

        // 1day = 1000ms * 60s * 60m * 24h = 86,400,000ms
        // 1h = 1000ms * 60s * 60m = 3,600,000ms
        // 1m = 1000ms * 60s = 60,000ms
        // 1s = 1000ms

    </script>

</body>

</html>

 

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    background: url('https://images.unsplash.com/photo-1485178575877-1a13bf489dfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1891&q=80') no-repeat;
    background-size: cover;
    background-position: bottom center;
    font-family: 'Oswald', sans-serif;
    color: white;
}

main {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
}

.container {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    text-align: center;
    color: white;
}

h1 {
    text-transform: uppercase;
    font-size: 3rem;
    margin: 20px 0;
}

h2 {
    font-size: 1.4rem;
    margin: 0;
}

.count {
    margin: 40px 0;
}

.co {
    display: inline-block;
    width: 100px;
    border: 2px solid;
    margin: 0 10px;
    font-size: 0.8rem;
    overflow: hidden;
    padding: 5px 20px;
}

.co span {
    font-size: 2rem;
    margin-top: 3px;
}

 

이번 코드는 프로모션 이벤트 페이지, 쇼핑몰 타임 세일, 혹은 서비스 론칭 티저 페이지에서 자주 사용되는 ‘실시간 디데이 카운트다운(D-Day Countdown Timer)’ 기능입니다.

특정 목표 시간까지 남은 시간을 일, 시, 분, 초 단위로 계산하여 1초마다 화면을 갱신해 주는 방식으로, 페이지에 강한 긴장감과 생동감을 더해주는 인터랙션입니다.

이 기능은 커머스 프로젝트나 포트폴리오에 적용했을 때 정적인 화면에 동적인 요소를 더해 실제 서비스처럼 보이게 만드는 데 효과적입니다.

이 코드를 처음 공부할 때 가장 헷갈리는 부분은 %, /, 1000 * 60 * 60 같은 복잡한 시간 계산 공식입니다. 단순한 연산처럼 보이지만, 밀리초 단위를 일·시간·분 단위로 변환하는 구조를 이해하는 것이 핵심입니다.

 

 

[컴퓨터의 시간 단위 해부하기]

자바스크립트에서 시간은 우리가 익숙한 1초, 1분 단위가 아니라 밀리초(ms, millisecond)라는 아주 작은 단위를 기준으로 계산됩니다. (1초 = 1000ms)

이 기본 개념을 바탕으로 시간 단위를 확장하면 다음과 같은 공식이 만들어집니다.

  • 1초 = 1000ms
    가장 기본 단위로, 자바스크립트의 시간 계산 기준이 되는 단위입니다.
  • 1분 = 1000ms × 60 = 60,000ms
    1초가 60번 모이면 1분이 되기 때문에, 이를 밀리초로 환산한 값입니다.
  • 1시간 = 1000ms × 60 × 60 = 3,600,000ms
    1분이 60개 모여 1시간이 되므로, 이를 누적 계산한 결과입니다.
  • 1일 = 1000ms × 60 × 60 × 24 = 86,400,000ms
    1시간이 24개 모이면 1일이 되는 구조를 밀리초로 표현한 값입니다.

이렇게 큰 숫자를 기준으로 전체 시간을 나눈 뒤 Math.floor()를 사용해 몫을 정리하고, %(나머지 연산자)를 이용해 남은 값을 다음 단위로 넘겨주는 방식으로 일, 시, 분, 초를 단계적으로 분해하는 로직이 완성됩니다.

 

'<script>' 카테고리의 다른 글

Vanilla Javascript_좌우 슬라이딩 슬라이더  (0) 2026.06.17
Vanilla Javascript_자동 이미지 슬라이드 쇼  (0) 2026.06.15
Vanilla Javascript_스마트 스크롤 내비게이션  (0) 2026.06.15
Vanilla Javascript_사이드바 토글 메뉴  (0) 2026.06.12
Vanilla Javascript_풀 스크린 오버레이 메뉴  (0) 2026.06.12
'<script>' Related Articles more