Contador regressivo com JavaScript: Projeto completo com HTML e CSS

Contador regressivo com JavaScript: Projeto completo com HTML e CSS

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?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação 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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias

Digite aqui para obter os resultados da pesquisa!

Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.