⏳ Temporizador de Contagem Regressiva (10 Segundos)

Usando setInterval no JavaScript para criar uma contagem regressiva de 10 segundos.
Ao chegar a 0, exibe “✅ Tempo esgotado!”

  • 🎬 Questionários/Testes: Exibir um limite de tempo
  • 🍜 Sites de Culinária: Contagem regressiva para o tempo de cozimento
  • 📊 Temporizador de Apresentação: Ferramenta simples para gerenciar o tempo
  • 🎮 Tempo Limite em Jogos: Útil para minijogos personalizados!

🧪 Experimente: pressione “Iniciar” para começar uma contagem regressiva de 10 segundos.
Em 0 segundos, exibe ✅ “Tempo esgotado!”
Pressione “Redefinir” para reiniciar a qualquer momento.

👇Aqui está👇
Tempo restante: 10 segundos
<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Temporizador de contagem regressiva</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 contagem regressiva</h1>
  <div id="countdown">Tempo restante: 10 segundos</div>
  <button onclick="startCountdown()">Iniciar</button>
  <button onclick="resetCountdown()">Redefinir</button>

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

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

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

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

</body>
</html>

⏱ Adaptar a contagem regressiva para mostrar minutos e segundos

Este modelo está configurado para uma contagem regressiva fixa de “10 segundos”, mas com um pequeno ajuste, você pode modificá-lo para exibir o tempo no formato de minutos e segundos.

Por exemplo, se quiser um temporizador de “1 minuto e 30 segundos”, basta usar o total de segundos e converter assim:

let totalSeconds = 90;

setInterval(() => {
  totalSeconds--;
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  document.getElementById("countdown").textContent =
    "Tempo restante: " + minutes + " min " + seconds + " seg";
}, 1000);
  • 📏 Defina facilmente qualquer tempo (ex: 5 minutos, 90 segundos, etc.)
  • 📱 Funciona bem com entradas de tempo em formulários
  • 🧠 O formato “min:seg” é mais fácil de entender para os usuários

A chave para criar temporizadores flexíveis é separar a “lógica interna do tempo” do “formato de exibição”.
Uma vez dominado isso, você poderá criar recursos mais avançados como pausa, continuar ou barras de progresso visuais.