Explicação do código de contagem regressiva
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.
Discussão (4)
Carregando comentários...