⏳ Temporizador de Cuenta Regresiva (10 Segundos)

Usando setInterval en JavaScript para crear una cuenta regresiva desde 10 segundos.
Al llegar a 0, muestra “✅ ¡Tiempo agotado!”

  • 🎬 Cuestionarios/Exámenes: Mostrar un límite de tiempo
  • 🍜 Sitios de Cocina: Cuenta regresiva para el tiempo de cocción
  • 📊 Temporizador para Presentaciones: Herramienta simple para gestionar el tiempo
  • 🎮 Tiempo límite en Juegos: ¡Útil para mini juegos personalizados!

🧪 Pruébalo: Presiona “Iniciar” para comenzar una cuenta regresiva de 10 segundos.
En 0 segundos, muestra ✅ “¡Tiempo agotado!”
Presiona “Reiniciar” para volver a empezar en cualquier momento.

👇Aquí está👇
Tiempo restante: 10 segundos
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Temporizador de cuenta regresiva</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 50px;
    }
    #countdown {
      font-size: 2rem;
      margin: 20px 0;
    }
    button {
      font-size: 1rem;
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1>⏳ Temporizador de cuenta regresiva</h1>
  <div id="countdown">Tiempo restante: 10 segundos</div>
  <button onclick="startCountdown()">Iniciar</button>
  <button onclick="resetCountdown()">Reiniciar</button>

  <script>
    let timeLeft = 10;
    let timerId = null;

    function startCountdown() {
      if (timerId !== null) return;
      document.getElementById("countdown").textContent = "Tiempo restante: " + timeLeft + " segundos";

      timerId = setInterval(() => {
        timeLeft--;
        if (timeLeft > 0) {
          document.getElementById("countdown").textContent = "Tiempo restante: " + timeLeft + " segundos";
        } else {
          clearInterval(timerId);
          timerId = null;
          document.getElementById("countdown").textContent = "✅ ¡Tiempo agotado!";
        }
      }, 1000);
    }

    function resetCountdown() {
      clearInterval(timerId);
      timerId = null;
      timeLeft = 10;
      document.getElementById("countdown").textContent = "Tiempo restante: 10 segundos";
    }
  </script>

</body>
</html>

⏱ Adapta el temporizador para mostrar minutos y segundos

Esta plantilla está configurada para un temporizador fijo de “10 segundos”, pero con un pequeño ajuste puedes adaptarla para mostrar el tiempo en formato de minutos y segundos.

Por ejemplo, si quieres un temporizador de “1 minuto y 30 segundos”, puedes usar el total en segundos y luego dividirlo para mostrar el tiempo de forma legible:

let totalSeconds = 90;

setInterval(() => {
  totalSeconds--;
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  document.getElementById("countdown").textContent =
    "Tiempo restante: " + minutes + " min " + seconds + " seg";
}, 1000);
  • 📏 Permite configurar tiempos personalizados fácilmente (por ejemplo: 5 minutos, 90 segundos, etc.)
  • 📱 Ideal si quieres recibir el tiempo desde un formulario
  • 🧠 El formato “min:seg” es más intuitivo para los usuarios

La clave para crear temporizadores versátiles está en separar la “lógica interna” del valor de tiempo de su “forma de visualización”.
Cuando domines esto, podrás avanzar hacia funciones más avanzadas como pausa, reanudación o barras de progreso visuales.