Comment créer un simple compte à rebours de 5 minutes en JavaScript ?-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment créer un simple compte à rebours de 5 minutes en JavaScript ?

Barbara Streisand

Dec 05, 2024 pm 12:04 PM

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

Création d'un compte à rebours de base en JavaScript

Problème :

Recherche d'une solution JavaScript simple pour implémenter un compte à rebours qui affiche « L'inscription se termine dans 05h00 ! » et compte à rebours jusqu'à "00:00" avant de réinitialiser à "05:00".

Solution :

Pour éviter les fonctions de date, nous présentons deux approches :

Vanille Javascript

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);
};

Copier après la connexion

HTML :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn