Como Fazer Contagem Regressiva
Aprenda a Fazer Contagem Regressiva: Passo a Passo
Meta Description: Este tutorial ensina como criar uma contagem regressiva usando HTML, CSS e JavaScript, com instruções passo a passo e exemplos de código. Aprenda a programar suas próprias contagens regressivas personalizáveis e animadas.
Introdução
Contagem regressiva é uma funcionalidade útil que muitas vezes precisa em sites e aplicações, desde relógios digitais até agendamentos de eventos e limitações temporárias. Neste tutorial, você aprenderá a criar sua própria contagem regressiva personalizada usando HTML, CSS e JavaScript. Estaremos abordando como:
- Configurar a estrutura básica da contagem regressiva com o HTML
- Stilizar os elementos de contagem regressiva usando CSS
- Programar a função principal da contagem regressiva com JavaScript
- Aplicar efeitos de transição suaves e animações personalizadas para melhorar a experiência do usuário.
Passo 1: Configurar a Estrutura Básica com HTML
Comece criando o arquivo `index.html` com o seguinte conteúdo:
```HTML
```
No corpo da página, crie um container para a contagem regressiva com a classe `contador`. Adicione também um parágrafo que mostrará o tempo restante e os elementos de controle.
```HTML
Tempo restante: ...
```
Passo 2: Estilizando os Elementos com CSS
Abra o arquivo `styles.css` e copie o seguinte código para estilizar nossa contagem regressiva:
```CSS
/* Definindo a aparência do container */
.contador {
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: bold;
background-color: #092B63;
color: white;
}
/* Adicionando animações e efeitos */
.contador span {
font-size: 52px;
}
button {
margin-top: 1rem;
padding: .75rem 1.5rem;
font-size: 1rem;
line-height: 1.5;
background-color: #092B63;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
```
Vamos criar algumas transições e animações na contagem regressiva. Copie o seguinte CSS para o arquivo `styles.css`, após a seção do container:
```CSS
@keyframes anelProgress {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
.contador {
transform: translate(-50%, -50%);
animation: anelProgress 2s linear infinite;
}
button[disabled] {
background-color: gray;
cursor: not-allowed;
}
```
Passo 3: Implementando a Contagem Regressiva com JavaScript
Abra o arquivo `script.js` e insira o seguinte código:
```JavaScript
// Configurando as variáveis
const botaoStart = document.getElementById('start');
const botaoPause = document.getElementById('pause');
const botaoReset = document.getElementById('reset');
const tempoRestante = document.getElementById('tempoRestante');
let segundosPassados = 0;
let timer;
let contador;
// Iniciando a Contagem Regressiva quando o botão Start é clicado
botaoStart.addEventListener('click', () => {
iniciaContagem();
});
// Pausando/Retomando a Contagem Regressiva quando o botão Pause/Start é clicado
botaoPause.addEventListener('click', () => {
pauseOrResume();
});
// Reiniciando a Contagem Regressiva quando o botão Reset é clicado
botaoReset.addEventListener('click', () => {
resetContagem();
});
// Função para iniciar a contagem regressiva
function iniciaContagem() {
// Iniciando a variável de tempoRestante e mostrando na página o valor restante
tempoRestante.innerHTML = `Tempo restante: ${segundosPassados} segundos`;
// Definindo a função que irá ser executada a cada segundo (1000ms) para atualizar a contagem
timer = setInterval(() => {
segundosPassados++;
// Calculando a quantidade de minutos e segundos no formato "M:SS" e mostrando na página o valor restante da contagem regressiva
let minutos = Math.floor(segundosPassados/60);
let segundos = segundosPassados % 60;
tempoRestante.innerHTML = `Tempo restante: ${minutos}:${segundos}`;
// Atualizando o valor do container com o valor atual da contagem regressiva
atualizaContador(segundos);
}, 1000);
}
// Função para pausar/retomar a contagem regressiva ao clicar no botão Pause/Start
function pauseOrResume() {
if (timer) {
// Se uma contagem está sendo feita, pause-a; caso contrário, continue com a contagem
clearInterval(timer);
} else {
timer = setInterval(() => {
segundosPassados++;
let minutos = Math.floor(segundosPassados/60);
let segundos = segundosPassados % 60;
tempoRestante.innerHTML = `Tempo restante: ${minutos}:${segundos}`;
atualizaContador(segundos);
}, 1000);
}
}
// Função para reiniciar a contagem regressiva ao clicar no botão Reset
function resetContagem() {
// Parando o cronômetro
pauseOrResume();
// Reiniciando as variáveis globais da contagem regressiva e atualizando os elementos HTML com os valores iniciais
segundosPassados = 0;
tempoRestante.innerHTML = 'Tempo restante: 0:00';
atualizaContador(segundosPassados);
}
// Função para atualizar o container da contagem regressiva com o valor atual da contagem em segundos (sem colónias)
function atualizaContador(valorAtualSegundos) {
// Atualizando o conteúdo HTML do elemento de contagem com o valor atual
contador.innerHTML = `${valorAtualSegundos}`;
// Configurando a animação da contagem regressiva com base no tempo restante
if (valorAtualSegundos === 0) {
contador.style.transform = 'rotate(180deg)';
contador.innerHTML = `${valorAtualSegundos}`;
} else if (valorAtualSegundos > 360) {
contador.style.transform = 'rotate(360deg)';
contador.innerHTML = `${valorAtualSegundos}`;
}
}
```
Conclusão
Com o tutorial acabou, você deve ter uma boa noção de como criar e estilizar sua própria contagem regressiva HTML/CSS/JavaScript. Experimente variar a estrutura, apresentação, cores, fontes e funções da sua contagem regressiva até você ficar totalmente confortável e entender o potencial dessa tecnologia em seu projeto ou website.
E agora que você já sabe fazer Contagens Regressivas, é hora de criar seu próprio template e começar a adicionar essas contagem nas partes relevantes do seu site!
Descubra como fazer contagem regressiva com este tutorial simples e fácil de seguir! Clique agora e aprenda com nossos passos detalhados. Palavras-chave principais: contagem regressiva, tutorial, passo a passo, aprender, clique aqui, Palavras-chaves secundárias: contador, cronômetro, timer, cálculo, sequência
Festas de Final de Ano
Tutoriais simples, criativos e muito buscados sobre decoração, comidas, looks, organização, mensagens e ideias práticas para celebrações de Natal, Ano Novo e confraternizações de fim de ano.