Contador de Tempo com Javascript

Vou mostrar a seguir um exemplo de como criar um contador de tempo em sua página. Por exemplo, você pode responder perguntas com tempo determinado, se passar o tempo fecha o teste e direciona o usuario para uma outra página ou então, liberar um link após certo tempo determinado por você.

Então vamos ver como fica, no exemplo, um link é liberado após 10 segundos.

1. Primeiro passo, vamos criar o script com o contador utilizando apenas HTML e Javascript.

2. <script language="JavaScript" type="text/javascript">
   var cont = 10;
   function contador() {
   document.getElementById('tempo').innerHTML=cont;
   	if(cont == 0) {
   		document.getElementById('link').style.display="block";
   	}
   	if (cont != 0){
   		cont = cont-1;
   		setTimeout("contador()", 1000);
   	}
   }
   </script>

3. Agora criamos onde será exibido o contador:

4. Aguarde <span id="tempo">-</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://ibogos.wordpress.com">
   	Você já pode acessar meu blog clicando aqui!
   </a></p>
   </div>

8. Pronto, agora temos apenas que chamar a função no fim da página:

9. <script>
      contador();
   </script>

10. Done!

Veja um exemplo AQUI.

~ por Bogos em Novembro 26, 2008.