Contagem regressiva com JQuery

Para quem precisa de um efeito legal para aquele site de casamento ou para a expectativa por aquele show da banda que está chegando, vai uma dica de um recurso em JQuery muito fácil de ser implementado. É o Circular-Countdown,  uma contagem regressiva animada em forma de círculos. Veja quantos dias faltam para o Natal:

1. Do que precisamos

Nosso contador é composto basicamente pelos seguintes arquivos e pastas:

  • index.html
  • js/jquery.min.js
  • js/init.js
  • js/jquery.ccountdown.js
  • js/jquery.knob.js
  • js/lte-ie7.js
  • css/style.css

Eles podem ser baixados aqui:

[easy_media_download url=”http://professorvirtual.org/wp-content/uploads/2014/07/circular-countdown/circular-countdown.zip” text=”circular-countdown.zip” force_dl=”1″]

 

2. Instalação e execução

a) Decompacte o arquivo “circular-countdown.zip” em uma pasta do seu computador ou do seus servidor web;
b) Execute o arquivo “index.html” no seu navegador web.

3. Principais customizações

a) Alterar a data final da contagem

Encontre e altere os dados na função “ccountdown()” do arquivo “index.html” cpmo mostrado abaixo

<script>
    // Informe a data final da contagem no formato (ano, mês, dia, 'hora:minuto');
    $(".ccounter").ccountdown(2014,12,25,'18:00');
</script>

b) Alterar as cores da barra de contagem

As cores das barras nos círculos podem ser alteradas de forma independente. Para fazê-lo você deve alterar dos dados no seguinte código HTML:

<div class="ccounter">
    <!-- 
    Altere as cores das barras de contagem e o tamanho dos círculos modificando os valores em "data-width" (largura/tamanho) e "data-fgColor" (cor da barra)
    -->
    <!-- CÍRCULO 1 - DIAS -->
    <div style="float:left;"><input class="knob days" data-width="80" data-min="0" data-max="365" data-displayPrevious=true data-fgColor="#ff00ff" data-readOnly="true" value="1"></div><div class="texto">Dias</div>
    <!-- CÍRCULO 2 - HORAS -->
    <div style="float:left;"><input class="knob hour" data-width="80" data-min="0" data-max="24" data-displayPrevious=true data-fgColor="#ff00ff" data-readOnly="true" value="1"></div><div class="texto">Hor</div>
    <!-- CÍRCULO 2 - MINUTOS -->
    <div style="float:left;"><input class="knob minute" data-width="80" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#ff00ff" data-readOnly="true" value="1"></div><div class="texto"">Min</div>
    <!-- CÍRCULO 2 - SEGUNDOS -->
    <div style="float:left;"><input class="knob second" data-width="80" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#ff00ff" data-readOnly="true" value="0" data-bgcolor="#eee"></div><div class="texto">Seg</div>
</div>

 3. Fontes originais de download

[su_button url=”https://github.com/nikhiln/Circular-Countdown” target=”blank”]Circular-Countdown[/su_button]

[su_button url=”https://github.com/aterrien/jQuery-Knob/blob/master/js/jquery.knob.js” target=”blank”]jQuery-Knob[/su_button]

 

4. Resumo das alterações nos arquivos originais:

  • tradução de termos
  • eliminação de arquivos e códigos dispensáveis
  • classe para contador no código css externo (style.css)
  • alterações nas cores dos códigos css inline
  • inclusão dos termos Dias,Hor,Min,Seg
  • troca do arquivo “jquery.knob.js” hospedado no github “nikhiln” para o original hospedado no github “aterrien” para que o contador faça o moviemnto antihorário.
  • acréscimo de 20px de margem para a direita no arquivo “jquery.knob.js”
Facebook Comment