Howto: Criando um contator regressivo e redirecionando para outra página

Técnica utilizada para manter a expectativa da assistência no lançamento de um novo produto. Pelo menos em um de meus empregadores, sempre que fosse lançado algo novo como um sistema, um site, ou seja lá o que e a imprensa estivesse presente, era solicitado um contador desses antes de entrar o serviço no ar.

Veja como é fácil implementar com Jquery:

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
        var settimmer = 0;
        $(function(){
                window.setInterval(function() {
                    var timeCounter = $("b[id=show-time]").html();
                    var updateTime = eval(timeCounter)- eval(1);
                    $("b[id=show-time]").html(updateTime);

                    if(updateTime == 0){
                        window.location = ("http://dominio.com/servico/");
                    }
                }, 1000);

        });
    </script>

Depois onde você quer que apareça, basta informar:

<div id="my-timer">
  <h1>Contagem regressiva para o lançamento</h1>
        <h1> <b id="show-time" style="font-size:5em">10</b> </h1>
</div>

Simples assim.

One thought to “Howto: Criando um contator regressivo e redirecionando para outra página”

  1. O código apresentado possui um pequeno bug:
    Se a contagem zerar e você clicar no botão de ”voltar” no navegador, ele irá retornar para a página de contagem com os segundos contando números negativos, de forma infinita e sem redirecionamento.

    Para corrigir o bug basta colocar este código entre a linha 7 e 8 e o problema está resolvido:

    if(updateTime < 1){ updateTime=0; }

    Colocando este código, o sistema não apresentará números negativos, e redirecionará mesmo após clicar no botão ''voltar" do navegador…

Leave a Reply

Your email address will not be published. Required fields are marked *