Oi Luciano!
Se você quiser fazer uma contagem regressiva sem precisar clicar em "ok" a cada segundo, usar o alert
não é a melhor opção porque ele bloqueia o código até que você clique em "ok". Uma alternativa é mostrar a contagem regressiva diretamente na página da web, sem o uso do alert
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contagem Regressiva</title>
</head>
<body>
<script>
let contador = prompt('Digite um número para começar a contagem regressiva');
let contadorElement = document.createElement('div');
document.body.appendChild(contadorElement);
function contagemRegressiva() {
if (contador >= 0) {
contadorElement.innerText = `Faltam ${contador} segundos`;
contador--;
setTimeout(contagemRegressiva, 1000);
}
}
contagemRegressiva();
</script>
</body>
</html>
A contagem regressiva aparece na página da internet sem precisar clicar em "ok" a cada segundo. Isso é feito usando um truque: criamos um espaço especial na página (um "elemento div") que pode mostrar informações. Este espaço é como um quadro branco que podemos modificar.
A função chamada contagemRegressiva
é como uma receita que faz o seguinte: ela pega o número que você digitou, mostra na página, espera um segundo, depois pega o próximo número e mostra novamente. Isso continua até que todos os números sejam mostrados.
O setTimeout
é como um temporizador. Ele diz à função para esperar um certo tempo (1 segundo, neste caso) antes de fazer a próxima coisa. Então, a função mostra um número, espera um segundo, depois mostra o próximo número, e assim por diante.
O truque é que a página é atualizada automaticamente a cada segundo, então você vê os números mudando sem precisar clicar em nada. É como se a página estivesse fazendo uma apresentação de slides automática com os números da contagem regressiva.
Você pode ver o projetinho em ação aqui nesse link.
Espero que a explicação tenha sido boa e que você tenha entendido.
Um abraço e bons estudos.