Nesta postagem, vamos aprender a criar um contador regressivo simples usando JavaScript. Pois, um contador regressivo pode ser útil em várias situações, como em um site de vendas, para mostrar quando uma oferta especial vai expirar, ou em um aplicativo de tarefas, para indicar o tempo restante até um prazo. Então vamos começar!
Conteúdo
Contador regressivo com JavaScript puro
Este código JavaScript criará um contador que podera exibir a contagem no console do navegador, atualizando a cada segundo. Vamos utilizar o método setInterval para atualizar o contador. Alembre-se de substituir a data final com a data do seu evento ou prazo:
// Defina a data final da contagem regressiva (substitua com a sua data)
const dataFinal = new Date('2023-12-31 23:59:59').getTime();
// Função para atualizar o contador a cada segundo
function atualizarContador() {
const agora = new Date().getTime();
const diferenca = dataFinal - agora;
const dias = Math.floor(diferenca / (1000 * 60 * 60 * 24));
const horas = Math.floor((diferenca % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutos = Math.floor((diferenca % (1000 * 60 * 60)) / (1000 * 60));
const segundos = Math.floor((diferenca % (1000 * 60)) / 1000);
console.log(`${dias}d ${horas}h ${minutos}m ${segundos}s`);
if (diferenca <= 0) {
clearInterval(interval);
console.log("Contagem encerrada!");
}
}
// Chame a função para iniciar a contagem regressiva e atualizar a cada segundo
const interval = setInterval(atualizarContador, 1000);
O que preciso saber antes de criar um contador regressivo com javascript, HTML e CSS
A criação de um contador regressivo com JavaScript pode ser uma tarefa desafiadora, especialmente se você é iniciante na programação. Então, antes de começar a desenvolver um contador regressivo, é importante entender alguns conceitos e considerações essenciais. Neste tópico, abordaremos o que você precisa saber e a lógica antes de iniciar o projeto do contador regressivo:
Estrutura HTML
Você precisará de uma estrutura HTML básica para incorporar o contador regressivo em seu site ou aplicativo. Também, certifique-se de adicionar um elemento HTML onde você exibirá o tempo restante.
Estilo e Personalização
Pense em como deseja estilizar e personalizar o contador para que ele se adapte ao design geral do seu site ou aplicativo. Pois, isso pode envolver a aplicação de estilos CSS e considerações de usabilidade.
Conhecimento Básico de JavaScript
Antes de criar um contador regressivo, é fundamental ter um entendimento sólido de JavaScript. Porque, você deve estar familiarizado com conceitos como variáveis, funções, manipulação de DOM (Document Object Model), eventos e sintaxe básica. Se você não tem experiência em JavaScript, é recomendável aprender os fundamentos primeiro.
Passo 1: Estrutura HTML
Primeiro, vamos criar a estrutura HTML básica para o nosso contador regressivo. Lembre-se que precisaremos de um elemento onde exibiremos o tempo restante. Então, veja como fazer isso:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Contador Regressivo</title>
</head>
<body>
<div id="contador"></div>
</body>
</html>
Passo 2: Estilos CSS
No proximo passo vamos aplicar estilos CSS para tornar seu contador regressivo mais atraente e integrado ao design do seu site ou aplicativo. Aqui estão algumas dicas de como você pode adicionar estilos CSS ao seu contador regressivo:
#contador {
font-size: 24px;
font-weight: bold;
color: #333;
text-align: center;
margin: 20px;
}
/* Personalize os estilos de acordo com suas preferências */
Passo 3: JavaScript
Agora, vamos adicionar o JavaScript para fazer o contador funcionar. Então, vamos usar o método setInterval para atualizar o contador a cada segundo. E aqui está o código:
// Data final do contador (substitua com a sua data)
const dataFinal = new Date('2023-12-31 23:59:59').getTime();
// Atualiza o contador a cada segundo
const contador = document.getElementById('contador');
const interval = setInterval(() => {
const agora = new Date().getTime();
const diferenca = dataFinal - agora;
const dias = Math.floor(diferenca / (1000 * 60 * 60 * 24));
const horas = Math.floor((diferenca % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutos = Math.floor((diferenca % (1000 * 60 * 60)) / (1000 * 60));
const segundos = Math.floor((diferenca % (1000 * 60)) / 1000);
contador.innerHTML = `${dias}d ${horas}h ${minutos}m ${segundos}s`;
if (diferenca <= 0) {
clearInterval(interval);
contador.innerHTML = "Contagem encerrada!";
}
}, 1000);
Com este código, você terá um contador regressivo funcional em sua página web.
Conclusão – Contador regressivo com javascript
Em suma, neste tutorial, aprendemos a criar um contador regressivo simples em JavaScript. No entanto, você pode personalizar o código com a data de contagem regressiva e o formato da exibição de acordo com suas necessidades.
Espero que tenha sido útil! Se tiver alguma dúvida, não hesite em perguntar. E Lembre-se de substituir a data de contagem regressiva no código JavaScript pelo seu próprio valor.
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
