Gerador de contador regressivo: HTML e React grátis, sem cadastro | We.Inc
Crie um contador regressivo para o seu site. Defina a data e o fuso horário, escolha um estilo e copie HTML puro ou um componente React. Sem conta, sem widget de rastreamento, sem script externo.
Um contador regressivo de site compara um prazo fixo com o relógio do visitante a cada segundo e mostra os dias, horas, minutos e segundos que faltam. Defina abaixo a data, a hora e o fuso horário, escolha um estilo e copie um HTML autossuficiente ou um componente React. O código roda na sua página sem script de terceiros nem conta.
Dois tipos de contagem regressiva
Tipo
Prazo
Use para
Data fixa
O mesmo instante para todos
Lançamentos, eventos, promoções que terminam em um horário real
Por visitante
Um número definido de horas depois da primeira visualização de cada visitante
Ofertas de boas-vindas que realmente expiram para aquela pessoa
Escolha uma data e o fuso horário a que o prazo pertence, um dos três estilos e uma cor de destaque, e veja o resultado ao vivo abaixo. O resultado é um único bloco de HTML, CSS e JavaScript, ou um componente React com classes do Tailwind.
Escolha a data e a hora do prazo e depois o fuso horário em que ele está. O código guarda o instante exato em UTC, então visitantes em outros fusos veem o tempo restante correto.
Ou mude para uma contagem por visitante e informe quantas horas cada visitante recebe.
Escolha um estilo e uma cor de destaque e edite o título e a mensagem exibida quando o tempo acaba.
Copie o embed HTML ou o componente React e cole onde o contador deve aparecer.
Só mostre uma contagem regressiva para um prazo que seja real. Contadores que reiniciam ou nunca terminam enganam os visitantes, e a Federal Trade Commission dos EUA inclui contagens falsas entre as práticas de design enganosas.
Diga o que acontece no zero na mensagem final, por exemplo que a promoção acabou ou que o evento começou, com um link para o próximo passo.
O contador usa o relógio do dispositivo do visitante. Se esse relógio estiver errado, a contagem também estará, então nunca use o contador como única verificação de um prazo real; aplique os prazos também no seu servidor.
Deixe os leitores de tela de fora das atualizações a cada segundo. O código marca o contador com role timer e aria-live off para que ele não anuncie cada tique.
Perguntas frequentes
Como adiciono um contador regressivo ao meu site?
Copie o embed HTML e cole na sua página onde o contador deve ficar. A maioria dos criadores de sites tem um bloco de HTML ou de embed para isso. Se o seu site é feito em React, copie o componente e renderize-o como qualquer outro componente.
O contador vai estar certo para visitantes em outros fusos horários?
Sim. A ferramenta converte a sua data e o seu fuso em um único instante exato em UTC e escreve esse número no código. O navegador de cada visitante faz a contagem até o mesmo instante, seja qual for o horário local.
O que a opção por visitante faz?
Ela inicia a contagem de cada visitante na primeira visualização e salva esse instante no navegador dele, então atualizar a página não reinicia a contagem. Limpar os dados do site ou trocar de dispositivo inicia uma nova, então use apenas para ofertas que você aceita honrar nesse caso.
Posso colocar este contador em um e-mail?
Não. Os clientes de e-mail não executam JavaScript. Contadores em e-mail são imagens animadas geradas por um servidor no momento em que o e-mail é aberto, o que uma página estática não consegue oferecer.
Por que o código guarda UTC
Uma data como 1 de dezembro às 9:00 significa instantes diferentes em Toronto e em Karachi. Guardar o prazo como um timestamp UTC elimina essa ambiguidade e também lida com as mudanças de horário de verão, já que a conversão usa as regras do fuso que você escolheu para aquela data exata.
Depois, o script subtrai a hora atual do prazo a cada tique e divide a diferença em dias, horas, minutos e segundos.
Mantendo o contador preciso e leve
Os navegadores desaceleram os timers em abas em segundo plano, então um contador que apenas subtrai um segundo por tique sai do ritmo. Este código recalcula a partir do relógio toda vez e agenda a próxima atualização para o início do segundo seguinte, então continua correto quando a aba volta.
Não há biblioteca nem requisição externa, o que mantém a página rápida e evita enviar dados dos visitantes para um fornecedor de widget.