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.

About these ads

7 Respostas para “Contador de tempo em JavaScript

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

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

  3. Era disso que eu precisava. Obrigado!!

  4. Muito obrigado fiquei procurando muito por isso, obrigado mesmo

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