F_Jr 0 Denunciar post Postado Outubro 2, 2016 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 Denunciar post Postado Outubro 2, 2016 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 Denunciar post Postado Outubro 3, 2016 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 Denunciar post Postado Outubro 4, 2016 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 Denunciar post Postado Novembro 4, 2019 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
