Crie uma contagem regressiva de dias, semanas, dias, horas e minutos com este plugin jquery countdown, muito utilizado antes de publicar uma nova página na web e deixar um contador para o usuário possa saber o dia que deve voltar ao site.
Para utilizar o plugin vamos carregar no topo de nosso arquivo a biblioteca jquery e o plugin count down:
1 2 | <script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript" src="jquery.countdown.js"></script> |
Vamos criar o html do nosso contator, basta criar uma div com um identificador que no caso estamos usando o id “counter”.
1 | <div id="counter"></div> |
Agora vamos a função do plugin responsável por criar o contator:
1 2 3 4 5 6 | $(function(){ $('#counter').countdown({ image: 'digits.png', startTime: '01:12:12:00' });}); |
Explicando um pouco melhor a função acima:
image: e a imagem sprit, com todos os números e seus efeitos a imagem utilizada nesse exemplo está no download no final do post.
startTime: responsável dizer ao plugin quanto tempo falta, essa valor você terá que pegar a data do servidor menos a data estimada de publicação e jogar o valor dessa conta ali dentro.
timerEnd: aqui por exemplo quando acabar o tempo você pode disparar uma função exemplo timerEnd: function(){ alert(‘end!’); },, e possível observar esse exemplo no link de exemplo no final do post.
format: pode dizer um formato padrão apara o contator por exemplo format: ‘mm:ss’, também pode ser visto no link de exemplo.
Essas são algumas das principais funcionalidades do plugin, não deixe de comentar o que você achou desse plugin ou se conhece algum outro semelhante.
Visualize o exemplo desse artigo clicando aqui, ou faça o download aqui.
Se você gostou de nosso artigo não deixe de compartilha através do botoes sociais abaixo.
ATUALIZAÇÃO: Novo post com o plugin jquery countdown funcionando.
