Contador de tempo regressivo (cronômetro) em Javascript/JQuery

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>

 

 

35 comentários em “Contador de tempo regressivo (cronômetro) em Javascript/JQuery”

  1. 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

  2. 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.

  3. 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

  4. 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();

    1. 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!

  5. 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

    1. 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”)

  6. 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;

    1. 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ê colocar
      

  7. Oi, 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?

    1. 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.

  8. 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á.

    1. 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
      });

  9. 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();

  10. 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();

  11. 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.

  12. 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.

  13. 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?

    1. 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.

  14. 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.

  15. 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);
    }
    }

  16. 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

  17. 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?

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *