Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

F_Jr

Explicação do código de contagem regressiva

Por , em Javascript

Recommended Posts

F_Jr    0

F_Jr
Postado

Boa Tarde Galera!

Achei esse código na internet e ele funcionou legal, só que pra min não adianta só copiar e colar e falar que ele está funcional. Na verdade quero entender o que cada linha de código está fazendo, a maioria eu sei o que está fazendo até deixei ele comentado.

Segue o código abaixo:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contagem Regressiva</title>
    <script type="text/javascript">
      
      var horas = '00'; //DEFINE A QUANTIDADE DE HORAS
      var minutos = '00'; //DEFINE A QUANTIDADE DE MINUTOS
      var segundos = 10; //A QUANTIDADE DE SEGUNDOS JÁ ESTÁ DEFINIDO
      
      function ContRegres(){ //AQUI FOI CRIADO UMA FUNÇÃO CHAMADO ContRegres
         segundos--; //OS SEGUNDOS VAI DECREMENTANDO
         
         if(segundos < 0){ //AQUI ESTÁ DIZENDO SE SEGUNDOS FOR MENOR 0 ELE IRÁ RECEBER 59
            segundos = 59;
            
            minutos--; //OS MINUTOS VAI DECREMENTANDO
            if(minutos <= 9){ //AQUI ESTÁ DIZENDO SE MINUTOS FOR MENOR IGUAL A 9 ENTÃO ACRESCENTE O 0 A ESQUERDA. EX 09, 08, 07, ETC...
               minutos = '0' + minutos;
            }
         }
         
         if(minutos == '0-1'){ //-->
            minutos = 5; //-->
            
            horas--; //AS HORAS VAI DECREMENTANDO
            if(horas <= 9){ //AQUI FUNCIONA O MESMO PRINCÍPIO DOS MINUTOS, SEMPRE COLOCANDO O 0 A ESQUERDA
               horas = '0' + horas;
            }
         }
         
         if(segundos <= 9){ //AQUI FUNCIONA O MESMO PRINCÍPIO DOS MINUTOS E DAS HORAS, SEMPRE COLOCANDO O 0 A ESQUERDA
            segundos = '0' + segundos;
         }
         
         if(horas == '0-1'){ //-->
            horas = '00';
            minutos = '00';
            segundos = '00';
            
            //NA LINHA ABAIXO MOSTRA NA TELA O RESULTADO FINAL QUANDO FOR 00:00:00 E UMA MENSAGEM DE TEMPO FINALIZADO
            clock1.innerHTML = horas + '<font color=#000>:</font>' + minutos + '<font color=#000>:</font>' + segundos + '<font color=#250202><br />Tempo Finalizado!</font>';
         }
         else{
            clock1.innerHTML = horas + '<font color=#000>:</font>' + minutos + '<font color=#000>:</font>' + segundos;
            setTimeout('ContRegres()',1000); //AQUI ESTOU A MINHA FUNÇÃO E O TEMPO EM MILISSEGUNDOS POR PARÂMETRO PARA O setTimeout
         }
      }
    </script>
  </head>
 
  <body>
    <h2 align="center"><font color="#065ca5" face="tahoma">Contagem Regressiva</font></h2>
    <hr color="#065ca5" width="100">
    <div align="center">
      <b><font color=#ff0000 size=2 face=arial><span id="clock1"></span><script>setTimeout('ContRegres()',1000);</script></font></b><br>
    </div>
  </body>
</html>

Onde que tiver marcado por //--> duas barras, dois traços e uma setinha pra frente é onde que eu tive a dificuldade para entender o que o código está fazendo. Se possível e alguém mais experiente possa me explicar o que o código está fazendo nesta linhas em que coloquei as //-->.

Desde Já, Agradeço pelo compreensão de todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

if(minutos == '0-1'){ //-->
  minutos = 5; //-->
if(horas == '0-1'){ //-->
é um bug do código que o cara que fez resolveu de uma forma nada elegante.

Existem contadores melhores e com códigos mais bem escritos.

exemplo:

http://wbruno.github.io/examples/time-counter/

Compartilhar este post

Link para o post
Compartilhar em outros sites

itlpps    109

itlpps
Postado

Chega uma hora que o minuto é -1, ai ele entra nesse if e concatena o 0 na frente, '0' + '-1' = '0-1';

if(minutos <= 9){ 
   minutos = '0' + minutos;
}

Ai ele 'corrige' isso no if abaixo;

if(minutos == '0-1'){ //-->
   minutos = 5; //-->

O mesmo acontece com a hora.

E de fato, como disse o William:

...resolveu de uma forma nada elegante.

Compartilhar este post

Link para o post
Compartilhar em outros sites

F_Jr    0

F_Jr
Postado

Bom Dia Galera!

Willian Bruno e itlpps, obrigado pela resposta de vocês. Willian Bruno visualizei o seu código e achei interessante, mas como tenho pouco conhecimento em javascript não consegui compreender em parte o seu código.

Achei um outro código aqui na internet e ele está funcional, só que surgiu uma pequena dúvida. Segue o código abaixo:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contagem Regressiva</title>
    <script type="text/javascript">
      var tempo = new Number();
      tempo = 15; //TEMPO DADO EM SEGUNDOS. AQUI É LIVRE PARA MANIPULÁ-LO.
      
      function ContagemRegressiva(){
         if(tempo >= 0){
            var minutos = parseInt(tempo / 60);
	        
            var horas = parseInt(minutos / 60);
	        minutos = (minutos % 60);
	        
            var segundos = (tempo % 60);
            
            if(horas < 10){
               horas = '0' + horas;
               horas = horas.substr(0,2); //-->
            }
            
            if(minutos < 10){
               minutos = '0' + minutos;
               minutos = minutos.substr(0,2); //-->
            }
            
            if(segundos < 10){
               segundos = '0' + segundos;
            }
            
            setTimeout('ContagemRegressiva()',1000);
            tempo--;
            regressivo.innerHTML = horas + '<font color=#000>:</font>' + minutos + '<font color=#000>:</font>' + segundos;
            if((horas == 00) && (minutos == 00) && (segundos == 00)){
               regressivo.innerHTML = horas + '<font color=#000>:</font>' + minutos + '<font color=#000>:</font>' + segundos + '<font color=#250202><br />Tempo Finalizado!</font>';
            }
         }
         else{
            //AQUI FAREI O REDIRECIONAMENTO
         }
      }
      ContagemRegressiva();
    </script>
  </head>
  <body>
    <!--<p id="regressivo"></p>-->
    <h2 align="center"><font color="#065ca5" face="tahoma">Contagem Regressiva</font></h2>
    <hr color="#065ca5" width="100">
    <div align="center">
      <b><font color=#ff0000 size=2 face=arial><span id="regressivo"></span></font></b><br>
    </div>
  </body>
</html>

A minha dúvida aqui é onde está marcado //--> com duas barras, dois traços e uma setinha pra frente.

if(horas < 10){
   horas = '0' + horas;
   horas = horas.substr(0,2); //-->
   //horas = horas.substr(0,2); //-->
}

Reescrevi o código para melhor visualização. Minha pergunta é o seguinte é necessário ter esta linha do horas = horas.substr(0,2), porque ele tanto comentado como descomentado o tempo aparece para min assim: 00:00:15 e vai decrementando.

Fiz uma alteração no código só por questão de apresentação na tela do usuário. Segue a parte do código abaixo:

if((horas == 00) && (minutos == 00) && (segundos == 00)){
   regressivo.innerHTML = horas + '<font color=#000>:</font>' + minutos + '<font color=#000>:</font>' + segundos + '<font color=#250202><br />Tempo Finalizado!</font>';
}

Quero saber na opinião de vocês se esta parte do código que acrescentei está coerente.

Na verdade estou usando este código juntamente com o PHP através de sessões. Por exemplo no PHP defini o tempo de 20 minutos para o usuário que está logado, só que quero mostrar para o usuário o tempo restante que ele tem. Já que no PHP o tempo fica estático e no javascript ele é dinâmico e se caso o usuário dar um refresh na página ele volta para o tempo de 20 minutos e vai decrementando até ele dar um novo refresh ou a sessão dele expirar. Do lado do client-server deixei tudo validado se caso client-side estiver desabilitado.

Após ter feito isto, vou fazer um novo script para que mostre na tela do usuário o tempo total que ele ficou na página, tudo isto dinamicamente. O meu objetivo é o seguinte, durante o tempo de sessão do usuário quero mostrar o tempo progressivo e o tempo regressivo.

Desde já, agradeço pela cooperação de todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tarcisio Thomaz    0

Tarcisio Thomaz
Postado

Prezados, ótimo dia!
Não sou programador, tenho pouco conhecimento em HTML, mas inseri o código acima e funcionou muito bem, agradeço por terem compartilhado o mesmo na internet.

 

Mas uma dúvida me surgiu, sempre que atualizo a minha página, o contador volta ao início da contagem, teria algum comando que fizesse a contagem regressiva permanecer regredindo até uma data final por exemplo? 

 

Grato desde já

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito