Função de Cronômetro, contagem regressiva

Vou mostrar para vocês uma função que sempre uso quando quero algum cronômetro na minha página, independente do objetivo, vá até aqui para ve-la em ação e veja o código fonte aqui. Tenho quase certeza que todos já usaram algo parecido. Essa minha função permite controle de vários cronometros, como parar um e ativar outro, parar um e reativar esse do numero em que foi parado, etc. Mas a maioria só vai querer um cronômetro na página e na maioria das vezes quando ela abrir, também serve! Ela funciona em <span>, <div>, <input>, <a>, <button>, <hn>, <strong>, etc., em quase todos os tipos de elementos. Abaixo um exemplo de chamadas à função:

contRegress("id-elemento", 10, true) //Aqui vai contar desde 10 até parar em zero contRegress("elem-id", 5) //Aqui vai contar desde 5 até parar em zero contRegress("id-outro", 40, false) //Vai contar desde 40 e não para em zero setTimeout("foo()", 5000); contRegress("id-outro", 5) //Vai executar "foo()" em 5 segundos e exibir a contagem

Como vocês podem ter visto nos exemplos acima o 1º parâmetro é o ID do elemento, o 2º é quantos segundos vai contar, e o 3º é facultativo, se você não declarar nada ele para em zero, se declar false ele não para em zero, fica contando. No último exemplo ela é chamada em conjunto com setTimeout para executar alguma ação apos os segundos, o primeiro parametro da função setTimeout é o que se vai fazer depois de X segundos, é uma string (ou uma função), o 2º parametro é em quanto tempo a ação vai ser executada, em milissegundos, é o que você declarar na minha função multiplicado por mil. A função, antigamente, executava alguma ação quando terminasse, mas por motivos de segurança tirei essa funcionalidade porque era fácil acabar com o cronometro somente com algum comando na barra de endereços (Talvez no próximo post eu falo como eu burlo os cronometros do Rapidshare etc.) , já com setTimeout não tem como. Abaixo a lista dos parâmetros:

void contRegress (string id_elemento, int segundos [, bool parar_em_zero])
  1. String : O ID do elemento (<span>, <div>, <input>, <a>, <button>, <hn>, <strong>, etc.) aonde será exibido o cronometro.
  2. Integer: O tempo, em segundos, em que o cronômetro vai contar, regressivamente.
  3. Boolean: Se vai parar ou não em zero, true p/ parar em zero, false p/ não parar. Se nada for declarado ele para em zero – opcional

Código Fonte e Download

Abaixo o código fonte para ver, ou se quiser baixe o arquivo aqui. São 2 funções, coloque as duas, a primeira é só para criar um <input> do tipo hidden para controlar as ações do cronometro. Não se preocupe em criar elementos adicionais somente coloque o código e chame a função como explicado acima, ela fará as coisas necessarias.

[ Download ]

1 function criaHidden(id, valor) //Por Bernardo Rufino 2 {var eBody = document.getElementsByTagName("body"); 3 var elem = document.createElement("input"); 4 elem.setAttribute("type", "hidden"); 5 elem.setAttribute("value", valor); 6 elem.setAttribute("id", id); 7 eBody[0].appendChild(elem);} 8 9 function contRegress(id, secs, stopZero) //Por Bernardo Rufino 10 {//Se está pronto para começar ou já começou. 11 if(document.getElementById("bmr-cont")) 12 {if(secs) //Foi por uma pessoa 13 {if(control.value=="cont"+id+"_run") 14 {control.value="cont"+id+"_stop";} 15 else if(control.value=="cont"+id+"_stop") 16 {control.value="cont"+id+"_run";} 17 else if (control.value.indexOf(id)==-1) 18 {control.value="cont"+id+"_end"; 19 control.parentNode.removeChild(control); 20 segundos=null; alvo=null; alvoValor=null; 21 stopZero=null; time=null; 22 contRegress(id, secs, stopZero);}} 23 else //Foi o sistema 24 {//Se estiver apto à continuar(controle: "cont$ID_run") 25 if(control.value=="cont"+id+"_run") 26 {segundos--; 27 if(alvo.tagName.toLowerCase()=="input") {alvo.value=segundos;} 28 else if(alvo.tagName) {alvo.innerHTML=segundos;} 29 if(segundos<=0 && stopCont==true) 30 {control.value="cont"+id+"_end"; 31 control.parentNode.removeChild(control); 32 segundos=null; alvo=null; alvoValor=null; 33 stopZero=null; time=null; control=null; id=null;} 34 else {setTimeout("contRegress('"+id+"')", 1000);}} 35 //Se não(controle: "cont$ID_stop"), vai ficar tentando. 36 else if (control.value=="cont"+id+"_stop") 37 {setTimeout("contRegress('"+id+"')", 100);}}} 38 else {criaHidden("bmr-cont", "cont"+id+"_run"); //Não, Ainda não começou 39 control=document.getElementById("bmr-cont"); 40 stopCont=((stopZero==null)?true:stopZero); 41 alvo=document.getElementById(id); 42 segundos=++secs; time=true; 43 contRegress(id);}}
Anúncios

6 Responses to Função de Cronômetro, contagem regressiva

  1. anonimo disse:

    pra que essa bosta desse tamanho???

  2. kkkk disse:

    ans bando de burro

  3. kkkk disse:

    chupa meu pau filho da puta do caralho isso é a coisa mais facil do mundo …..

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: