Cómo crear: Temporizador de cuenta regresiva de JavaScript

Aprende a crear temporizadores de cuenta regresiva usando JavaScript.

Prueba por ti mismo

Crear temporizador de cuenta regresiva

Ejemplo

<!-- Muestra el temporizador de cuenta regresiva en el elemento -->
<p id="demo"></p>
<script>
// Establece la fecha para el conteo regresivo
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Actualiza el conteo regresivo cada 1 segundo
var x = setInterval(function() {
  // Obtiene la fecha y la hora de hoy
  var now = new Date().getTime();
  // Calcula la distancia entre la fecha actual y la fecha del conteo regresivo
  var distance = countDownDate - now;
  // Calcula los días, horas, minutos y segundos
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  // Muestra los resultados en el elemento con id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  // Si el conteo regresivo termina, escribe algunos textos.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
, 1000);
</script>

Prueba por ti mismo

Páginas relacionadas

Manual de referencia:Método window.setInterval() de JavaScript