코딩ㆍ개발 정보/HTML 연습

[JAVASCRIPT] 거꾸로 가는 시간 만들기

RioRex 2024. 7. 25.

2024년 7월 31일 오전 09시까지 현재 서버 시간을 기준으로 남은 시간을 DD일 HH시 MM분 00초 남았다고 매 초 단위로 실시간 카운트를 해주고 싶어, 이런 것은 어떤 방식으로 구현할 수 있는거야? JAVASCRIPT 로도 가능해? 구현해줘 그리고, 이러한 부분이 서버 혹은 클라이언트 많은 부하를 줄 수 있나?

실시간 카운트다운을 구현하는 것은 JavaScript로 충분히 가능합니다. 이 카운트다운은 클라이언트 측에서 실행되며 서버에 부하를 주지 않기 때문에 효율적입니다. 다음은 2024년 7월 31일 오전 09시까지의 시간을 계산하고, 매 초마다 남은 시간을 업데이트하는 JavaScript 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .countdown {
            font-size: 2rem;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="countdown" id="countdown"></div>

    <script>
        // 목표 시간 설정 (2024년 7월 31일 오전 09시)
        const targetDate = new Date('2024-07-31T09:00:00');

        function updateCountdown() {
            const now = new Date();
            const timeDifference = targetDate - now;

            if (timeDifference <= 0) {
                document.getElementById('countdown').textContent = "00일 00시 00분 00초 남음";
                return;
            }

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

            document.getElementById('countdown').textContent =
                `${days.toString().padStart(2, '0')}일 ` +
                `${hours.toString().padStart(2, '0')}시 ` +
                `${minutes.toString().padStart(2, '0')}분 ` +
                `${seconds.toString().padStart(2, '0')}초 남음`;
        }

        // 처음 카운트다운을 설정하고 1초마다 업데이트
        updateCountdown();
        setInterval(updateCountdown, 1000);
    </script>
</body>
</html>

코드 설명:

목표 시간 설정: targetDate 변수에 2024년 7월 31일 오전 09시의 시간을 설정합니다.
시간 업데이트 함수: updateCountdown 함수는 현재 시간과 목표 시간의 차이를 계산하여 남은 일, 시, 분, 초를 계산합니다.
타이머 시작: updateCountdown 함수를 처음 호출하고 setInterval 함수를 사용하여 매초마다 업데이트합니다.

성능 고려사항:

이 코드는 클라이언트 측에서 실행되므로 서버에 부하를 주지 않습니다.
클라이언트 장치의 성능에 영향을 줄 가능성은 매우 적습니다. 자바스크립트의 setInterval 함수는 효율적으로 작동하며, 카운트다운 업데이트는 최소한의 리소스를 사용합니다.

이 방법은 사용자 브라우저에서 실행되기 때문에 여러 사용자가 동시에 접속해도 서버에 추가적인 부하가 발생하지 않습니다. 클라이언트의 성능에 따라 매우 큰 문제가 발생하지는 않습니다.

그럼 카운트다운이 아닌, 현재 시간을 년월일시분초밀리초 로 보여주려고 한다면 어떻게 만들어야해?

현재 시간을 실시간으로 년, 월, 일, 시, 분, 초, 밀리초까지 보여주는 JavaScript 코드를 작성할 수 있습니다. 이를 위해 setInterval 함수를 사용하여 매 밀리초마다 시간을 업데이트하도록 할 수 있습니다.

아래는 HTML과 JavaScript를 사용하여 현재 시간을 실시간으로 표시하는 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Current Time Display</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .time-display {
            font-size: 2rem;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="time-display" id="timeDisplay"></div>

    <script>
        function updateTime() {
            const now = new Date();
            
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 월은 0부터 시작하므로 +1 필요
            const date = now.getDate().toString().padStart(2, '0');
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            const milliseconds = now.getMilliseconds().toString().padStart(3, '0');

            document.getElementById('timeDisplay').textContent =
                `${year}년 ${month}월 ${date}일 ${hours}시 ${minutes}분 ${seconds}초 ${milliseconds}밀리초`;
        }

        // 처음 시간 업데이트 및 매 1밀리초마다 업데이트
        updateTime();
        setInterval(updateTime, 1);
    </script>
</body>
</html>

코드 설명:

현재 시간 가져오기: new Date() 객체를 사용하여 현재 시간을 가져옵니다.
시간 형식화: 년, 월, 일, 시, 분, 초, 밀리초를 각각 포맷하여 문자열로 변환합니다.
- 월은 0부터 시작하므로 1을 더해줍니다.
- padStart 메서드를 사용하여 자릿수를 맞춥니다.
시간 업데이트: setInterval 함수를 사용하여 매 밀리초마다 updateTime 함수를 호출하여 시간을 업데이트합니다.

성능 고려사항:

이 코드 역시 클라이언트 측에서 실행되며, 서버에 부하를 주지 않습니다.
setInterval을 1밀리초 단위로 호출하는 것은 브라우저와 클라이언트 장치에 다소 부하를 줄 수 있습니다. 하지만 현대 웹 브라우저와 장치는 이러한 작업을 효율적으로 처리할 수 있습니다.
필요한 경우, 업데이트 주기를 약간 늘려 성능을 최적화할 수 있습니다 (예: 10ms).

이 코드는 클라이언트 장치에서 현재 시간을 실시간으로 표시하는 데 매우 적합합니다.

밀리초 부분을 45ms 에서 5ms 사이로 랜덤으로 줄 수 도 있나?

밀리초 부분을 45ms에서 5ms 사이로 랜덤하게 줄 수 있습니다. 이를 위해 setInterval 대신 setTimeout을 사용하여 매번 다른 간격으로 updateTime 함수를 호출하도록 할 수 있습니다.

다음은 밀리초 부분을 45ms에서 5ms 사이의 랜덤한 간격으로 업데이트하는 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Current Time Display</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .time-display {
            font-size: 2rem;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="time-display" id="timeDisplay"></div>

    <script>
        function updateTime() {
            const now = new Date();
            
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 월은 0부터 시작하므로 +1 필요
            const date = now.getDate().toString().padStart(2, '0');
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            const milliseconds = now.getMilliseconds().toString().padStart(3, '0');

            document.getElementById('timeDisplay').textContent =
                `${year}년 ${month}월 ${date}일 ${hours}시 ${minutes}분 ${seconds}초 ${milliseconds}밀리초`;
            
            // 다음 업데이트를 5ms에서 45ms 사이의 랜덤 시간 후에 실행
            const nextUpdate = Math.floor(Math.random() * (45 - 5 + 1)) + 5;
            setTimeout(updateTime, nextUpdate);
        }

        // 처음 시간 업데이트
        updateTime();
    </script>
</body>
</html>

코드 설명:

현재 시간 가져오기: new Date() 객체를 사용하여 현재 시간을 가져옵니다.
시간 형식화: 년, 월, 일, 시, 분, 초, 밀리초를 각각 포맷하여 문자열로 변환합니다.
- 월은 0부터 시작하므로 1을 더해줍니다.
- padStart 메서드를 사용하여 자릿수를 맞춥니다.
랜덤한 간격 설정: 5ms에서 45ms 사이의 랜덤한 값을 생성하여 nextUpdate 변수에 저장합니다.
시간 업데이트: setTimeout 함수를 사용하여 nextUpdate 밀리초 후에 updateTime 함수를 다시 호출합니다.

이 방법은 매번 다른 간격으로 시간을 업데이트하므로 밀리초 부분이 5ms에서 45ms 사이로 랜덤하게 나타납니다. 클라이언트 장치의 성능에 크게 영향을 미치지 않으며, 서버 부하는 전혀 없습니다.

저작자표시 비영리 변경금지

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

[JavaScript] 자바스크립트 101 Tips (0)	2024.07.25
[CSS] position 속성 예제 (0)	2024.07.25
[sublimetext] 코드 정렬 애드온 (0)	2024.07.25
[sublimeText] 코드 찾아가기 애드온 (0)	2024.07.25
[HTML] Viewport, DPR, 가로, 세로 다르게 지정 (0)	2024.07.25

[JAVASCRIPT] 거꾸로 가는 시간 만들기

코드 설명:

성능 고려사항:

코드 설명:

성능 고려사항:

코드 설명:

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

댓글

티스토리툴바