Bogos

novembro 26, 2008

Contador de Tempo com Javascript

Filed under: Diversos — Tags:, , , , , , — Bogos @ 4:35 pm

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="https://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.

Anúncios

7 Comentários »

  1. Olá amigo, achei muito interessante este post , eu tava tendo problemas com outro codigo que nao abria no IE(qualquer versao) entao encontrei este seu, so que meu unico problema é que no firefox ele conta de dois em dois segundos, no IE ele conta certo… da uma olhada, se possivel me retorne por e-mail
    http://kuffel.com.br/thedownload/queime-depois-de-ler-filebase

    Grato pela sua atenção

    Abraços

    Comentário por Download de Filmes — abril 5, 2009 @ 3:40 pm

  2. Vlw cara muuiiiitoo bom

    Comentário por Leandro — maio 17, 2009 @ 3:00 pm

  3. Valeu pelo comentário!

    Comentário por Bogos — maio 18, 2009 @ 11:15 am

  4. Passei uma semana atrás desde código.
    Valeu!!!

    Comentário por Rogeres — outubro 4, 2010 @ 12:20 am

  5. Direto ao ponto! De forma rápida e bem explicativa parabéns!

    Comentário por Lucas — novembro 6, 2013 @ 11:39 pm

  6. Muito boa postagem!

    Comentário por João Victor — março 19, 2017 @ 4:16 pm


RSS feed for comments on this post. TrackBack URI

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 )

Foto do Google+

Você está comentando utilizando sua conta Google+. 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 )

w

Conectando a %s

Crie um website ou blog gratuito no WordPress.com.

%d blogueiros gostam disto: