Solucionado
Boa tarde!
Caso eu quisesse deixar a contagem regressiva em formato de horas ao invés de segundos (02h:00m:00s), como eu poderia fazer?
E pra fazer uma contagem progressiva nesse formato, como poderia ser feito? (Visto que quando eu coloco a variavel++, ele fica progressivo, porém no "formato de segundos (120 segundos ao invés de 2m por exemplo)).
Não sei se consegui ser claro nas minhas duvidas, mas agradeço desde já :)
Abraaço!
Acho que este exemplo pode ajudar você a criar um cronômetro progressivo:
http://www.taringa.net/posts/hazlo-tu-mismo/8217693/Utilidades-para-crear-y-disenar-tu-web.htmlNão ficou muito claro pra mim a explicação desse site. Alguém mais tem alguma explicacão no mínimo em ingles? Haha
http://jsfiddle.net/ezmilhouse/V2S9d/Tem um monte de coisa que não entendo desse código, haha. Será que apenas com os cursos aqui do Alura, vou conseguir ler esse código futuramente?
Oi André. Sou iniciante em programação, e estou no mesmo exercício que você, é sim possível fazer a contagem progressiva, no formato de horas, com o que você aprendeu até agora. O problema é que eu não li direito sua pergunta e achei que você queria uma contagem regressiva, mas no formato de hora:minuto:segundo.
Enfim, aqui o resultado pra não passar em branco (já que eu fiquei um tempão fazendo haha)
Primeiro o html, aqui acho que não tem mistério:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Contagem Regressiva</title>
</head>
<body>
<h1>Contagem Regressiva</h1>
<p class="frase">Clique no contador abaixo para iniciar</p>
<p id="contador"><span id="horas">2</span>:<span id="minutos">0</span>:<span id="segundos">3</span></p>
<script src="jquery.js"></script>
<script src="contagem.js"></script>
</body>
</html>Em seguida o script:
var horas = +$("#horas").text();
var minutos = +$("#minutos").text();
var segundos = +$("#segundos").text();
$("#contador").one("click", function(){
var contadorID = setInterval(function(){
if(horas == 0 && minutos == 0 && segundos == 0){
clearInterval(contadorID);
$('.frase').text('Contagem terminada')
}else if(minutos == 0 && segundos ==0){
horas--;
$('#horas').text(horas);
minutos += 59;
$('#minutos').text(minutos);
segundos += 59;
$('#segundos').text(segundos);
}else if(segundos == 0){
minutos--;
$('#minutos').text(minutos);
segundos += 59
$('#segundos').text(segundos);
}else{
segundos --;
$('#segundos').text(segundos);
}
}, 1000);
});Aqui eu coloquei condições para se modificarem os números em hierarquia, diminui se uma hora, adicionam se adicionam-se 59 minutos, diminui-se um minuto, adicionam-se 59 segundos . Para fazer uma contagem progressiva segue-se a mesma lógica, mas de maneira reversa, ou seja, faça o contador ir até 60, e depois aumente um minuto (e assim por diante).
Resolver os problemas de programação envolve pensamento criativo e lógica, as vezes vc fica muito tempo em um problema (assim como eu fiquei nesse haha), mas sempre tem uma solução.
Resolvi tentar fazer a contagem progressiva aqui também.
var horas = +$("#horas").text();
var minutos = +$("#minutos").text();
var segundos = +$("#segundos").text();
$("#contador").one("click", function(){
var contadorID = setInterval(function(){
segundos++
$('#segundos').text(segundos)
if(segundos == 60){
segundos = 0;
$('#segundos').text(segundos);
minutos ++;
$('#minutos').text(minutos);
if (minutos == 60){
minutos = 0
$('#minutos').text(minutos);
horas++
$('#horas').text(horas);
}
}
}, 1000);
});Esse código funciona com o HTML que eu postei antes.
Bem, provavelmente existem maneiras mais fáceis de fazer isso, e talvez tenham alguns erros no meu código, mas a função que você queria está rodando!
Qualquer dúvida com relação ao código que eu escrevi é só perguntar que eu respondo.
//