Contador de tempo em JavaScript

Bom dia pessoal, hoje deixo um simples codigo em JavaScript para contar tempo na página para execuçao de algum comando.

Por exemplo, pode fazer um teste on-line com tempo determinado, se passar o tempo fecha o teste e direciona o usuario para uma outra página. Ou então liberar o link após certo tempo determinado por você.

Então vamos ver como fica, nesse exemplo utilizei uma simples mecânica para redirecionar o usuário a uma determinada página.

  1. Primeiro passo, vamos criar o script com o contador, no meu caso fiz a página em ASP, porém pode ser feita ate em HTML.
  2. <script language="JavaScript" type="text/javascript">
    var contador = 10;
    function conta() {
    document.getElementById('tempo').innerHTML=contador;
    	if(contador == 0) {
    		document.getElementById('link').style.display="block";
    	}
    	if (contador != 0){
    		contador = contador-1;
    		setTimeout("conta()", 1000);
    	}
    }
    </script>
  3. Agora criamos onde será exibido o contador:
  4. Aguarde <span id="tempo">0</span> segundos.
  5. O contador será exibido dentro das tags SPAN com o ID tempo.
  6. Aqui mostramos o que será exibido quando o tempo acabar:
  7. <div id="link" style="display:none">
    <p><a href="http://www.linkoff.com.br">
    	Clique aqui para acessar o site.
    </a></p>
    </div>
  8. Pronto, agora temos apenas que chamar a função no fim da página:
  9. <script>
    conta();
    </script>
  10. Pronto, tudo criado e funcionando. Não?

Confira a página de exemplo clicando aqui.

5 Comentários »

  1. Wellington disse

    Valeu cara..
    Estou fazendo um site em PHP e necessitava muito de um código desses. Dá pra fazer isso usando apenas o código PHP?

  2. nelião disse

    Ow…
    vc eh baum!!
    =]

  3. Filmeiros disse

    Simplesmente sensacional

  4. Antonio Claudemir disse

    Fera teu script funciona, mais como faço para o tempo não reniciar quando faço a ataulização do nagegador?

  5. André disse

    Era disso que eu precisava. Obrigado!!

RSS feed para comentários neste post · URI do TrackBack

Deixe um comentário