Redirecionar muitas vezes é uma tarefas essencial para blogs ou sites.
Iremos aprender hoje a criar um javascript para criar um redirecionamento automático do seu site ou blog com uma contagem regressiva configurável a seu gosto.
Como já mostrei em Redirecionamento de um url para Blogger, é muito importante que "tenhamos na manga" esse recurso, principalmente no caso de erros 404 (páginas não acessíveis) e mudanças de endereços.
Hoje, diferentemente daquele simples redirecionamento, estarei ensinando a criar um redirecionamento com um contador regressivo para executar tal ação.
Preparei um javascript com as seguintes funcionalidades para isso:
- Após a contagem regressiva de 10 segundos, a página atual será redirecionada para uma página da sua escolha;
- Será mostrada em uma DIV cada segundo passado, para que, ao chegar o 0 (zero) da contagem, o redirecionamento aconteça (lembrando que a contagem e o redirecionamento são separados; portanto, não dependerão um do outro).
Veja o nosso código a seguir:
<script type="text/javascript">
<!--
var numero = 10;
function chamar(){if(numero>0){document.getElementById('timers').innerHTML = --numero;}}
setInterval("chamar();", 1000);
setTimeout("document.location = 'http://seuurl.com.br';",10000);
//-->
</script>
<div align="center" style="font-family: tahoma; font-size: 16px;">Você será redirecionado em: <br><div style="font-family: tahoma; font-size: 56px;" id="timers">10</div>
</div>
<!--
var numero = 10;
function chamar(){if(numero>0){document.getElementById('timers').innerHTML = --numero;}}
setInterval("chamar();", 1000);
setTimeout("document.location = 'http://seuurl.com.br';",10000);
//-->
</script>
<div align="center" style="font-family: tahoma; font-size: 16px;">Você será redirecionado em: <br><div style="font-family: tahoma; font-size: 56px;" id="timers">10</div>
</div>
Você poderá aumentar ou diminuir o tempo regressivo de acordo com seu gosto:
Para isso, basta trocar 10000 por outro valor, considerando que o mesmo será em milissegundos.
Nesse caso, 10.000 milissegundos equivalem a 10 segundos.
Se você quiser colocar 20 segundos para o redirecionamento da página, por exemplo, você deverá fazer os seguintes passos:
- Trocar o valor de SetTimeout de 10000 para 20000.
- Trocar a variável 'numero', que é 10, para 20;
- Trocar o número escrito dentro da DIV, de id 'timers', para 20.
Para visualizar esse código acesse a página abaixo:
Essa, na verdade, é uma página não existente que configurei com o javascript acima!
http://www.abelhudosdainformatica.com.br/redirecionamento-regressivo-javascript/
Marcadores: javascript