[ jquery Example ] 4 countdown clocks (perfect for express past) > 자유게시판

• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

• 페이스북 공유
• 트위터 공유

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>

<div>
    <div class="countdown">
        <h2>Alarm 1 (4 PM):</h2>
        <div id="countdown1"></div>
    </div>
    <div class="countdown">
        <h2>Alarm 2 (5 PM):</h2>
        <div id="countdown2"></div>
    </div>
    <div class="countdown">
        <h2>Alarm 3 (10 AM):</h2>
        <div id="countdown3"></div>
    </div>
</div>

<script>
    function formatElapsedTime(ms) {
        var totalSeconds = Math.floor(ms / 1000);
        var hours = Math.floor(totalSeconds / 3600);
        var minutes = Math.floor((totalSeconds % 3600) / 60);
        var seconds = totalSeconds % 60;
        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} 전`;
    }

    function setupCountdown(id, targetTime) {
        var now = new Date();
        if (targetTime > now) {
            // 시간이 남아 있을 경우 countdown 실행
            $(id).countdown(targetTime, function(event) {
                $(this).html(event.strftime('%H:%M:%S'));
            });
        } else {
            // 시간이 지났을 경우, 지속적으로 경과 시간 업데이트
            function updateElapsedTime() {
                var elapsed = new Date() - targetTime;
                $(id).html(formatElapsedTime(elapsed));
            }
            updateElapsedTime(); // 즉시 업데이트
            setInterval(updateElapsedTime, 1000); // 1초마다 업데이트
        }
    }

    var now = new Date();
    var alarm1Time = new Date(); alarm1Time.setHours(16, 0, 0, 0);
    var alarm2Time = new Date(); alarm2Time.setHours(17, 0, 0, 0);
    var alarm3Time = new Date(); alarm3Time.setHours(10, 0, 0, 0);

    setupCountdown('#countdown1', alarm1Time);
    setupCountdown('#countdown2', alarm2Time);
    setupCountdown('#countdown3', alarm3Time);
</script>

추천 검색단어 wr_1

Favorite Link wr_2

연관글 wr_3