JavaScript로 간단한 5분 카운트다운 타이머를 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript로 간단한 5분 카운트다운 타이머를 만드는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-12-05 12:04:10

원래의

359명이 탐색했습니다.

How to Create a Simple 5-Minute Countdown Timer in JavaScript?

JavaScript에서 기본 카운트다운 타이머 만들기

문제:

간단한 JavaScript 솔루션 찾기 "등록이 05:00분 후에 마감됩니다!"를 표시하는 카운트다운 타이머를 구현합니다. "05:00"으로 재설정되기 전에 "00:00"까지 카운트다운합니다.

해결책:

날짜 기능을 방지하기 위해 두 가지 접근 방식을 제시합니다.

바닐라 자바스크립트

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

로그인 후 복사

HTML:

<body>
    <div>Registration closes in <span>

로그인 후 복사

위 내용은 JavaScript로 간단한 5분 카운트다운 타이머를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!