post

Criando contador regressivo com jQuery (JavaScript)

Publicado em: 11/04/2021 / Atualizado em: 13/04/2021

Categorias: BlogJavaScript (JS)

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.

Publicações recomendadas:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/828

ID de Referência: 828

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários