Criando contador regressivo com jQuery (JavaScript)

1° Etapa – Importando bibliotecas JS

Para criar um contador regressivo com javascript, neste projeto vamos importar duas bibliotecas de código.

A primeira delas é o famoso jQuery (biblioteca javascript). O jQuery, além de facilitar a escrita do nosso código, também é uma dependência obrigatória do segundo conjunto de códigos JS que iremos trazer.

A segunda se chama jQuery.countdown (link para o site).

Nossas primeiras linhas de código neste exemplo ficaram assim:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" charset="utf-8"></script>
<script src="jquery.countdown.min.js" charset="utf-8"></script>

Sendo que neste exemplo estou trazendo o arquivo jquery.countdown.min.js da raiz do meu site, mas você pode especificar o caminho onde esta o arquivo, ou subir o arquivo para um provedor CDN.

Script do arquivo via CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js" charset="utf-8"></script>

2° Etapa – Escrevendo o código HTML

Abaixo segue o código HTML que irá receber o javascript:

<p> Restam: <span data-countdown="2021/04/15"></span> </p>
<p> Restam: <span data-countdown="2021/04/11 15:00:00"></span> </p>

No exemplo acima, estou mostrando dois parágrafos diferentes, cada um com um valor de tempo diferente.

Observação: no momento deste artigo estamos no dia 11/04/2021

3° Etapa – Criação do código JS

Abaixo segue o exemplo de código JS que pode ser carregado apenas uma vez na pagina e ser usado para quantos contadores você quiser.

<script>
  $('[data-countdown]').each(function() {
    var $this = $(this), finalDate = $(this).data('countdown');
    $this.countdown(finalDate, function(event) {
      $this.html(event.strftime('%D dias, %H horas, %M minutos e %S segundos'));
    });
  });
</script>

Código completo:

Abaixo segue a junção de todo o código acima:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js" charset="utf-8"></script>


<p> Restam: <span data-countdown="2021/04/15"></span> </p>
<p> Restam: <span data-countdown="2021/04/11 15:00:00"></span> </p>

<script>
  $('[data-countdown]').each(function() {
    var $this = $(this), finalDate = $(this).data('countdown');
    $this.countdown(finalDate, function(event) {
      $this.html(event.strftime('%D dias, %H horas, %M minutos e %S segundos'));
    });
  });
</script>

Segue abaixo o exemplo de código acima funcionando em ambiente de produção, com algumas melhorias com PHP para deixar mais dinamico:

https://contador-regressivo-com-jquery-javascript.brunoalbim.repl.co/

Observação: No exemplo do link acima em ambiente de produção, eu defini uma data de lançamento dinâmica, sempre vai adicionar +2 dias, então o contador nunca vai acabar, então dependo do dia que você estiver vendo sempre vai contar a sua data atual + 2 dias. Isso claro, é para você ver o contador sempre funcionando, mas em seu ambiente de produção ou em seu site você não ira definir uma data de lançamento dinâmica, você deve usar uma data estática, para que o contador chegue a zero.