Ir ao conteúdo
  • Cadastre-se

Javascript contador que realiza contagem regressiva não funciona


Posts recomendados

Olá pessoal, sou iniciante  na programação, e enfim.. estou tento alguns problemas.. no exercicio proposto tenho q fazer um botão que ao ser apertado dispara um evento de contagem regressiva do numero inserido até 1, para isso usei a estrutura de repetição while(){} no entanto... nao está dando certo. 

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>CONTAGEM PARES</h1> 
    
    <p> insira um numero:
        <input type="text" id="NumeroEntrado">
    </p>
    <p>
<input type="button" value="fazer contagem" onclick="contarPares()">

    </p> 
    <p>
    <h3 id="contador"></h3> 
</p>
<script>
 
function contarPares(){
var numero= Number(document.getElementById("NumeroEntrado"));
//if(numero==0||isNaN(numero)){alert("insira um numero válido")};
var i= numero;
while(i>1){contador.innerHTML="os numeros pares entre 1 e "+numero+"são:"+ i-2; }




}
</script>
</body>
</html>

 

Link para o post
Compartilhar em outros sites

@DanJavascript Olá colega.


O enunciado desse exercício, que deve ter sido proposto em aula, está meio estranho.


Não há como fazer uma contagem regressiva da forma que você está querendo usando um laço while, pelo simples motivo de que o laço é muito rápido, e você não verá a contagem, e sim apenas o último número, que neste meu caso é o zero (0).


Veja abaixo o que estou dizendo:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>    
 
<p>Numero</p>
<input type="number" id="numero-entrado" name="numero-entrado">  
<br> 
<input type="submit" value="Iniciar" onclick="contar()">

<p>
<div id="contador"></div>
</p>

<p></p>

<script>
function contar(){
var numero = Number(document.getElementById('numero-entrado').value);
//
while(numero >= 0){     
     document.getElementById("contador").innerHTML = numero;
     numero--;
}
}
</script>

</body>
</html>

 

Mas você deve estar pensando, como não vejo, ele não está contando, mas está sim.


Veja abaixo o mesmo exemplo com alert parando a execução, e veja que ele conta, mas é tão rápido que você não podia ver antes:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>    
 
<p>Numero</p>
<input type="number" id="numero-entrado" name="numero-entrado">  
<br> 
<input type="submit" value="Iniciar" onclick="contar()">

<p>
<div id="contador"></div>
</p>

<p></p>

<script>
function contar(){
var numero = Number(document.getElementById('numero-entrado').value);
//
while(numero >= 0){     
     alert(numero);
     document.getElementById("contador").innerHTML = numero;
     numero--;
}
}
</script>

</body>
</html>

 

O correto para ver a contagem regressiva, seria esse exemplo abaixo:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>    
 
<p>Numero</p>
<input type="number" id="numero-entrado" name="numero-entrado">  
<br> 
<input type="submit" value="Iniciar" onclick="contar()">

<p>
<div id="contador"></div>
</p>

<p></p>

<script>
function contar(){
  var numero = Number(document.getElementById('numero-entrado').value);
  //
  var x = setInterval(function() {
  //
  document.getElementById("contador").innerHTML = numero;  
  numero--;
  if (numero < 0) {
    clearInterval(x);
  }
  //
}, 1000);
}
</script>

</body>
</html>

 

Veja com calma os 3 exemplos que coloquei para entender, e se caso fica alguma dúvida, fique à vontade em perguntar.


Abraços colega.
 

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!