Procurei pela internet um contador regressivo (estilo cronômetro) para mostrar o tempo em uma sessão de login. Achei alguns modelos, mas muito extensos. Até que encontrei um parecido com o que eu queria e resolvi adaptá-lo.
O contador mostra a contagem regressiva em uma tag html (span, div, etc).
Não se esqueça de incluir o JQuery
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
O código está todo comentado!
<script type="text/javascript">
var tempo = new Number();
// Tempo em segundos
tempo = 300;
function startCountdown(){
// Se o tempo não for zerado
if((tempo - 1) >= 0){
// Pega a parte inteira dos minutos
var min = parseInt(tempo/60);
// Calcula os segundos restantes
var seg = tempo%60;
// Formata o número menor que dez, ex: 08, 07, ...
if(min < 10){
min = "0"+min;
min = min.substr(0, 2);
}
if(seg <=9){
seg = "0"+seg;
}
// Cria a variável para formatar no estilo hora/cronômetro
horaImprimivel = '00:' + min + ':' + seg;
//JQuery pra setar o valor
$("#sessao").html(horaImprimivel);
// Define que a função será executada novamente em 1000ms = 1 segundo
setTimeout('startCountdown()',1000);
// diminui o tempo
tempo--;
// Quando o contador chegar a zero faz esta ação
} else {
window.open('../controllers/logout.php', '_self');
}
}
// Chama a função ao carregar a tela
startCountdown();
</script>
Rafael, ótimo seu script, adorei! Somente que ele pena em um quesito.
Quando o usuário dá um F5 na página, o contador é reiniciado. Para o tempo padrão!
Encontrei outro script, parecido, mas que ele armazena o tempo em COOKIE, e quando dado F5, ele diminui o tempo, com o que está armazenado, com isso o contador não é reiniciado. Somente que ele só aparece em contagem de segundos, não separadamente H:m:s, como o seu!
http://www.codigosnaweb.com/forum/Contagem-regressiva-mantendo-contagem-no-refresh_15_1373.html
Poderia estar implementado essa funcionalidade ao seu script, que ficará show de bola!
Muito Obrigado! Pela Atenção!!
http://www.codigosnaweb.com/forum/Contagem-regressiva-mantendo-contagem-no-refresh_15_1373.html
Olá Claudiney
Este script eu usei em um sistema onde o cliente queria que o tempo zerasse toda vez que a tela fosse carregada. Se o tempo chegasse em zero ele era redirecionado para uma outra tela.
Obrigado pela dica 😀
ps: O filtro de spam deixou sua mensagem bloqueada. Só vi hoje.
Rafael,
Obrigada pelo post, simples e útil 😉
ola Rafael, ficou show de bola o script mas fiquei com uma dúvida, ao configurar a variável com segundos que ultrapassam mais de 60 minutos o contador de horas permanece com 0 e o de minutos ultrapassa 60. Por exemplo:
7000 segundos = 116 minutos = 1 hora e 50 minutos (aproximadamente)
daí na impressão fica 00:116:59
obrigado
ola Rafael, fiz algumas modificações no seu script, agora se a quantidade de segundos superar 1 hora, (como no exemplo 3600 segundos = 1 hora) o cronometro irá exibir
01:00:00 === obs.: como para minha aplicação não precisei redirecionar para nenhuma página ao zerar o cronometro, retirei essa funcionalidade, mas para quem precisar é só não retirar 🙂 espero ter contribuído!
var tempo = new Number();
// Tempo em segundos
tempo = 3600;
function startCountdown(){
// Se o tempo não for zerado
if((tempo – 1) >= 0){
// Pega a parte inteira dos minutos
var min = parseInt(tempo/60);
// horas, pega a parte inteira dos minutos
var hor = parseInt(min/60);
//atualiza a variável minutos obtendo o tempo restante dos minutos
min = min % 60;
// Calcula os segundos restantes
var seg = tempo%60;
// Formata o número menor que dez, ex: 08, 07, …
if(min < 10){
min = "0"+min;
min = min.substr(0, 2);
}
if(seg <=9){
seg = "0"+seg;
}
if(hor <=9){
hor = "0"+hor;
}
// Cria a variável para formatar no estilo hora/cronômetro
horaImprimivel = hor+':' + min + ':' + seg;
//JQuery pra setar o valor
$("#sessao").html(horaImprimivel);
// Define que a função será executada novamente em 1000ms = 1 segundo
setTimeout('startCountdown()',1000);
// diminui o tempo
tempo–;
// Quando o contador chegar a zero faz esta ação
}
}
// Chama a função ao carregar a tela
startCountdown();
Beleza 😀
Vou postar ali como sugestão também. Obrigado 🙂
Olá, gostei muito do código, embora eu não saiba de js rs…
Mas como faço pra implementar no meu html?
Quais os nomes das classes que tenho que colocar nas divs e quantas divs irei precisar?
Abraço!
esse código não funcionou comigo algum errado ?
o primeiro código da postagem funcionou
Como faço para o contador aparecer dentro de uma div, desculpa a pergunta ser tão obvia, é que estou iniciando na programação e ainda não sei como fazer, se alguém puder me dar um exemplo fico muito agradecido.
Obrigado
Olá Moises
Na linha onde tem o código: $(“#sessao”).html(horaImprimivel);
Onde está $(“#sessao”) você coloca o ID da div que vc quer.
A identificação do ID no jQuery é do mesmo jeito que no css, usando o # -> $(“#id_da_div”)
Muito obrigado pelo script, é pequeno, funcional e pelo menos pra mim (que nunca estudei JS) é bastante intuitivo. Aproveitei o embalo do Bruno e implementei uma mostragem de dias, caso as horas sejam maiores que 24.
Valeu mesmo Rafael, vou clicar nuns adds aqui do seu site sempre que eu lembrar. 😀
var days = parseInt(hor/24);
hor = hor % 24;
if(days >1)
horaImprimivel = days+’ days ‘+hor+’:’ + min + ‘:’ + seg;
else if(days = 1)
horaImprimivel = days+’ day ‘+hor+’:’ + min + ‘:’ + seg;
else
horaImprimivel = hor+’:’ + min + ‘:’ + seg;
kkkkkk.. falta bastante pra eu conseguir meus primeiros 100 dólares uaheuhaeuhae
Valeu pela dica também 🙂
Como eu faço para imprimir esse script em uma div?
Como ele é um javascript, se você colocar dentro de uma div ele vai aparecer. Se quiser manter a formatação, coloque dentro de um pre.
O código fica formatado do jeito que você colocarOi, eu estava tentando fazer esse cronometro no meu site, mas não soube como… eu sou iniciante e sei HTML, CSS básico e pouquíssimo JavaScript!
Como e onde coloco estes códigos? tenho que criar um arquivo.js?
Olá Thiago,
O primeiro código você tem que colocar dentro das tags do html.
O segundo (maior) pode ser em qualquer lugar, por exemplo
como a primeira coisa que você dentro da tag .
E por fim, crie uma
div vazia com id="sessao"onde você quer que o cronômetro apareça.nao funcionaaaaaa
Brother (sapohaaaaaaaaa), experimenta criar uma div assim . Acho que vai funcionar.
Funcionou perfeitamente obrigado meu caro, agora ele esta imprimindo com se eu desse um enter () no texto, como resolver isso.
Rafael, também já tinha esse script que você utilizou, e estou procurando e até então, não consegui encontrar como resolver um problema.
Por exemplo, eu queria que o relógio fosse resetado toda vez que alguma outra atividade fosse chamada, por exemplo, se o usuário clicar em um item do meu menu, quer dizer que ele está utilizando o sistema ainda, entao, nao deveria continuar com o mesmo tempo, ou seja, o cronometro deveria recomeçar…
Agradeço desde já.
Tente disparar algum evento jQuery quando o usuário clicar no body ou em alguma outra coisa, como link, parágrafo, etc.
// body a, p, etc
$('body').click(function() {
// chama a função novamente
});
Iaeh Gaelra, estou deixa um código que eu fiz aprimorações conta os dias, horas, mês e segundos. e não há reiniciamento do cronometro apos o refresh ele recupera através da Session. Vlw galera espero que vocês tenha gostado.
<?php
session_start();
$tempo_atual = @mktime(date("Y/m/d H:i:s"));
$tempo_permitido = 3610; // tempo em segundos até redirecionar
$fim = "";
if(@$_SESSION['Cookie_countdown']=="") {
$tempo_entrada = @mktime(date("Y/m/d H:i:s"));
$tempo_cookie = '3600'; // em segundos
$_SESSION['Cookie_countdown'] = $tempo_entrada;
} else {
$tempo_gravado = $_SESSION['Cookie_countdown'];
$tempo_gerado = $tempo_atual-$tempo_gravado;
$fim.= $tempo_permitido-$tempo_gerado;
if($fim
var tempo = new Number();
tempo = ”;
function startCountdown(){
if((tempo – 1) >= 0){
var days = parseInt(hor/24);
hor = hor % 24;
var min = parseInt(tempo/60);
var hor = parseInt(min/60);
var seg = tempo%60;
if(min < 10){
min = "0"+min;
min = min.substr(0, 2);
}
if(seg <=9){
seg = "0"+seg;
}
if(hor 1)
horaImprimivel = ‘Session Expire:‘+ days+’ dias, ‘+hor+’:’ + min + ‘:’ + seg;
else if(days = 1)
horaImprimivel = ‘Session Expire:‘+ days+’ dia, ‘+hor+’:’ + min + ‘:’ + seg;
else
horaImprimivel = ‘Session Expire:‘+ hor+’:’ + min + ‘:’ + seg;
$(“#sessao”).html(horaImprimivel);
setTimeout(‘startCountdown()’,1000);
tempo–;
} else {
// Redirecionamento apos zera o tempo
window.open(‘admin.php?pagina=sair’, ‘_self’);
}
}
startCountdown();
Iaeh Gaelra, estou deixa um código que eu fiz aprimorações conta os dias, horas, mês e segundos. e não há reiniciamento do cronometro apos o refresh ele recupera através da Session. Vlw galera espero que vocês tenha gostado.
<?php
session_start();
$tempo_atual = @mktime(date("Y/m/d H:i:s"));
$tempo_permitido = 3610; // tempo em segundos até redirecionar
$fim = "";
if(@$_SESSION['Cookie_countdown']=="") {
$tempo_entrada = @mktime(date("Y/m/d H:i:s"));
$tempo_cookie = '3600'; // em segundos
$_SESSION['Cookie_countdown'] = $tempo_entrada;
} else {
$tempo_gravado = $_SESSION['Cookie_countdown'];
$tempo_gerado = $tempo_atual-$tempo_gravado;
$fim.= $tempo_permitido-$tempo_gerado;
if($fim
var tempo = new Number();
tempo = ”;
function startCountdown(){
if((tempo – 1) >= 0){
var days = parseInt(hor/24);
hor = hor % 24;
var min = parseInt(tempo/60);
var hor = parseInt(min/60);
var seg = tempo%60;
if(min < 10){
min = "0"+min;
min = min.substr(0, 2);
}
if(seg <=9){
seg = "0"+seg;
}
if(hor 1)
horaImprimivel = ‘Session Expire:‘+ days+’ dias, ‘+hor+’:’ + min + ‘:’ + seg;
else if(days = 1)
horaImprimivel = ‘Session Expire:‘+ days+’ dia, ‘+hor+’:’ + min + ‘:’ + seg;
else
horaImprimivel = ‘Session Expire:‘+ hor+’:’ + min + ‘:’ + seg;
$(“#sessao”).html(horaImprimivel);
setTimeout(‘startCountdown()’,1000);
tempo–;
} else {
// Redirecionamento apos zera o tempo
window.open(‘admin.php?pagina=sair’, ‘_self’);
}
}
startCountdown();
Olá Rafael, Dentro da eu coloquei um botão para acionar o contador.
PRONTO!
Quando o botão é clicado ele desaparece e por cima aparece o contador.
codigo CSS.
#sessao {
font: bold 150px Arial;
padding: 50px;
color: #000;
border: solid 2px #000;
width: 700px;
text-align: center;
line-height: 300px;
background-color: lightblue;
}
Até aí tudo bem, é isso mesmo que eu quero.
Só que tem mais uma coisa, quando o contagem chega em “1”, o contador congela. Eu queria que o contador desaparecesse e o botão aparecesse. Assim podendo clicar novamente e repetir o mesmo processo num looping infinito. Isso é possível? Até agora não consegui resolver esse problema.
Edit: Eu coloquei o código HTML aqui no comentário mas não apareceu.
Olá Rafael, Dentro da div eu coloquei um botão para acionar o contador.
Quando o botão é clicado ele desaparece e por cima aparece o contador.
codigo CSS.
#sessao {
font: bold 150px Arial;
padding: 50px;
color: #000;
border: solid 2px #000;
width: 700px;
text-align: center;
line-height: 300px;
background-color: lightblue;
}
Até aí tudo bem, é isso mesmo que eu quero.
Só que tem mais uma coisa, quando o contagem chega em “1”, o contador congela. Eu queria que o contador desaparecesse e o botão aparecesse. Assim podendo clicar novamente e repetir o mesmo processo num looping infinito. Isso é possível? Até agora não consegui resolver esse problema.
Teria como fazer isso, só que ao contrario?
tipo executar o script no site e zerar o cronometro para nao ter que esperar 1/60
Obrigado pelo script, funcionou tranquilamente, mas notei algumas falhas. Eu estou fazendo um app em Intel XDK e possui dois botões, um para iniciar o cronômetro e iniciar um som em loop, outro para reiniciar e parar o cronômetro, mas não tem como parar o cronômetro e notei que se a pessoa apertar o botão que chama a função várias vezes, a velocidade do cronômetro vai aumentar porque a função vai ser chamada mais de uma vez. Tem como chamar apenas uma vez e parar quando for pressionado outro botão?
Olá Erickson,
Também estou fazendo um aplicativo no Intel XDK e esse código não funcionou. Poderia me ajudar? Desde já, agradeço muito.
Rafael muito obrigado.
Tenho um pouco de dificuldades para criar a estrutura ainda, mas no seu exemplo consegui entender e vi que não é tão complicado.
Usei para dar reload na página e atualizar as consultas, porém precisava dizer quando isso iria acontecer então ai o contador entra.
Parabéns e Obrigado novamente.
Opa! Muito bom…vou deixar aqui a minha contribuição! Caso seja necessário utilizar o cronômetro para período maior que 86400 segundos (1 dia).
Mudei a função para poder ser usada com n controles em uma mesma página.
Basta no HTML por um span ->
==================================================
$(document).ready(function () {
$(‘.crono’).each(function () {
startCountdown($(this).attr(‘id’), $(this).attr(‘tempo’));
});
});
function startCountdown(controle, tempo) {
// Se o tempo não for zerado
var tempo_aux = 0;
if ((tempo – 1) >= 0) {
var dias = 0;
if (tempo / 86400 > 1) {
dias = Math.round(tempo / 86400);
tempo_aux = tempo % 86400;
}
else {
tempo_aux = tempo;
}
// Pega a parte inteira dos minutos
var min = parseInt(tempo_aux / 60);
// horas, pega a parte inteira dos minutos
var hor = parseInt(min / 60);
//atualiza a variável minutos obtendo o tempo restante dos minutos
min = min % 60;
// Calcula os segundos restantes
var seg = tempo_aux % 60;
// Formata o número menor que dez, ex: 08, 07, …
if (min < 10) {
min = "0" + min;
min = min.substr(0, 2);
}
if (seg <= 9) {
seg = "0" + seg;
}
if (hor <= 9) {
hor = "0" + hor;
}
if (dias 0) {
horaImprimivel = dias + ” dia” + (dias > 1 ? “s” : “”) + ” – ” + hor + ‘:’ + min + ‘:’ + seg;
}
else {
horaImprimivel = hor + ‘:’ + min + ‘:’ + seg;
}
//JQuery pra setar o valor
$(‘#’ + controle).html(horaImprimivel);
// Define que a função será executada novamente em 1000ms = 1 segundo
// diminui o tempo
tempo–;
setTimeout(‘startCountdown(“‘ + controle + ‘”,’ + tempo + ‘)’, 1000);
}
}
Mais uma contribuição minha, simplifiquei ao máximo, ficaram poucas linhas, acrescentei os dias e anos, por exemplo se você colocar 31536000 segundos, será equivalente a 365 dias, ele vai decrementando 364 dias 23:59:59 etc… até chegar a zero. O tempo deve ser passado em segundos como parâmetro da função. Segue o código
function startCountdown(tempo){ //passar o tempo em segundos como parâmetro da função
if(tempo >= 0){ // Se o tempo maior ou igual a zero
var min = parseInt(tempo / 60); // Pega os minutos totais em relação aos segundos
var seg = tempo%60;// Calcula os segundos restantes de cada minuto
var hora;
min > 59 ? hora = parseInt(min / 60) : hora = 0; // Calcula as horas, pega a parte inteira dos minutos / 60, esse código é a mesma coisa de um IF
var dia = parseInt(hora/24); // pega as horas divide por 24 para saber o número de dias
hora = hora%24; // pega as horas restantes de cada dia
min = min%60; //pega os minutos restantes de cada hora
horaImprimivel = dia + ” dia(s) ” + (hora < 10 ? "0" : "") + hora + ":" + (min < 10 ? "0" : "") + min + ":" + (seg < 10 ? "0" : "") + seg;// Cria a variável para formatar no estilo hora/cronômetro
$("#tempo").html(horaImprimivel);//JQuery pra setar o valor
tempo–; // diminui o tempo -1 a cada segundo
setTimeout("startCountdown("+tempo+")", 1000); // Define que a função será executada novamente em 1000ms = 1 segundo
// Quando o contador chegar a zero faz esta ação
} else {
$("#tempo").append(" – Tempo Esgotado."); //Coloque aqui o que desejar fazer quando o tempo chegar a zero
}
} //fim da função startCountdown()
$(document).ready(function(){
var segundos = 86400;
startCountdown(segundos);
});
HTML
Olá, sei que esse post é antigo, mas gostaria de tirar uma dúvida.
Estou usando esse código em java, porém, não consigo preencher esse cronometro em cada linha da minha tabela:
sabe me dizer poque esse contador aparece somente na minha primeira lista e não em todas que são exibidas?
código:
ui:repeat varStatus=”status” var=”e” value=”#{pesquisaPasseioBean.passeios}” >
/ui:repeat>
Nao consigo colar o código java aqui ;$
Passando só para agradecer que esse código e os comentários ajudaram demais, simples e bem explicado #2020.