Um cronômetro de contagem regressiva em uma página da Web geralmente é usado para indicar o final ou o início de um evento. Ele pode ser usado para permitir que os clientes saibam quando uma oferta de preço expira ou apresentar uma página inicial “em breve” para indicar quando o site será publicado. Também pode ser usado para informar ao usuário se uma ação precisa ser executada em breve; por exemplo, alguns sites desconectarão os usuários de uma página se não houver atividade dentro de um determinado período de tempo.

Então, voltando ao que estamos fazendo, aqui está uma olhada no produto final. Imprensa Repetir na demonstração para iniciar a função de contagem regressiva:

Vamos começar!

1. Criando a marcação

Usaremos duas seções para esta demonstração: uma seção de cronômetro e uma seção de conteúdo. A seção do cronômetro conterá os elementos para exibir o tempo restante na contagem regressiva e a seção de conteúdo será o elemento mostrado após o término da contagem regressiva.

  
This content will be displayed in
  

    0 days
    0 hours
    0 minutes
    and
    0 seconds
  



  
Hello, World

Considerando Acessibilidade

Como estamos construindo uma seção com informações que mudam constantemente, devemos considerar como essas informações serão apresentadas às tecnologias assistivas. Nesta demonstração, usaremos o timer função para representar os elementos que têm texto atualizado regularmente.

  
This content will be displayed in
  

    0 days
    0 hours
    0 minutes
    and
    0 seconds
  



  
Hello, World

2. Estilizando as seções

O contêiner do cronômetro tem a maior prioridade quando a página é carregada pela primeira vez, então vamos torná-lo um contêiner fixo com toda a largura e altura da página, para que nenhum outro conteúdo seja visível até que a contagem regressiva termine. Também usaremos um estilo de opacidade em nosso conteúdo para ocultá-lo.

#timer {
  position: fixed;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 2;
}

#content {
  opacity: 0;
}

3. Construindo o cronômetro de contagem regressiva

Esta é a lógica que usaremos para lidar com o cronômetro de contagem regressiva:

1. Defina um valor de contagem regressiva com base em uma data ou hora específica
2. Obtenha a data atual e subtraia o valor da nossa contagem regressiva
3. Execute a função de subtração em um intervalo de 1s
4. Se a data da contagem regressiva for menor ou igual à data atual, finalize a contagem regressiva

Vamos começar definindo nosso valor de contagem regressiva. Existem dois métodos possíveis que podemos usar:

1. Definindo o valor da contagem regressiva como uma data e hora específicas

Podemos inicializar um valor de contagem regressiva como uma data específica usando o Date() construtor. Este método é útil para exibir ofertas especiais ou descontos, pois o tempo final da contagem regressiva será sempre constante. Por exemplo, você pode usar um cronômetro de contagem regressiva para exibir uma oferta de desconto até o Ano Novo.

let countdownDate = new Date('01 January 2023 00:00')

2. Definindo o valor da contagem regressiva como uma unidade de tempo adicionada à data atual

Também podemos inicializar um cronômetro de contagem regressiva adicionando tempo à data atual. Esse método é útil para lidar com interações de timer baseadas no usuário. Usamos os métodos Date get e set para isso. Por exemplo, você pode definir um cronômetro para exibir o conteúdo 30 segundos após o usuário acessar uma página da web.

let countdownDate = new Date().setSeconds(new Date().getSeconds() + 30);

Também podemos modificar esta função por minutos ou horas:

let countdownDate = new Date().setMinutes(new Date().getMinutes() + 5);

let countdownDate = new Date().setHours(new Date().getHours() + 1)

Depois de configurar nosso valor de contagem regressiva, podemos definir nossas constantes:

const daysElem = document.getElementById("days"),
  hoursElem = document.getElementById("hours"),
  minutesElem = document.getElementById("minutes"),
  secondsElem = document.getElementById("seconds"),
  timer = document.getElementById("timer"),
  content = document.getElementById("content");

Então podemos trabalhar em nossa função de contagem regressiva.

4. Criando a função startCountdown()

Vamos criar uma nova função chamada startCountdown() onde obtemos a data atual e a subtraímos da data de contagem regressiva. vamos usar o Date.getTime() método para converter ambos os valores em milissegundos, então dividimos a diferença por 1.000 para converter em segundos.

const startCountdown = () => {
  const now = new Date().getTime();
  const countdown = new Date(countdownDate).getTime();

  const difference = (countdown - now) / 1000;
}

Precisamos converter o valor da diferença em dias, horas, minutos e segundos para determinar o valor do nosso cronômetro.

Podemos converter segundos em dias dividindo a diferença em segundos pelo valor de um dia (60 segundos * 60 minutos * 24 horas) e arredondando para o valor mais próximo.

let days = Math.floor(difference / (60 * 60 * 24));

Como nossa contagem regressiva é um valor aditivo, precisaremos levar em consideração os valores anteriores ao calcular. Ao converter para horas, primeiro precisamos saber quantos dias há de diferença e depois converter o restante para horas.

Por exemplo, se tivermos 90.000 segundos, isso será convertido em 25 horas. No entanto, não podemos exibir uma contagem regressiva, pois 1 dia e 25 horas pois será um horário incorreto. Em vez disso, primeiro calcularemos quantos dias estão nos segundos como 90000 / (60 * 60 * 24) = 1 dia com um restante de 3600 segundos. Em seguida, podemos converter esse restante em horas dividindo por (60 segundos * 60 minutos), o que dá 1 hora.

let hours = Math.floor((difference % (60 * 60 * 24)) / (60 * 60));

Aplicando a mesma divisão cumulativa para minutos e segundos:

  let minutes = Math.floor((difference % (60 * 60)) / 60);
  let seconds = Math.floor(difference % 60);

Em seguida, passaremos nossos valores calculados para os elementos HTML. Levando em consideração a gramática, podemos definir uma função para formatar o texto da unidade de tempo como singular ou plural com base no valor do tempo.

const formatTime = (time, string) => {
  return time == 1 ? `${time} ${string}` : `${time} ${string}s`;
};

Nosso startCountdown() função agora se parece com isso:

const startCountdown = () => {
  const now = new Date().getTime();
  const countdown = new Date(countdownDate).getTime();

  const difference = (countdown - now) / 1000;

  let days = Math.floor(difference / (60 * 60 * 24));
  let hours = Math.floor((difference % (60 * 60 * 24)) / (60 * 60));
  let minutes = Math.floor((difference % (60 * 60)) / 60);
  let seconds = Math.floor(difference % 60);

  daysElem.innerHTML = formatTime(days, "day");
  hoursElem.innerHTML = formatTime(hours, "hour");
  minutesElem.innerHTML = formatTime(minutes, "minute");
  secondsElem.innerHTML = formatTime(seconds, "second");
};

5. Executando nossa função em intervalos

Agora que temos nossa função de contagem regressiva, criaremos uma função que executa a função de contagem regressiva em um intervalo de 1s.

Primeiro, criaremos nosso valor timerInterval.

let timerInterval

Em seguida, definimos o timerInterval como uma função setInterval quando a página é carregada

window.addEventListener("load", () => {
  startCountdown();
  timerInterval = setInterval(startCountdown, 1000);
});

Neste método, chamamos o startCountdown() funcionam imediatamente quando a página é carregada para atualizar os valores de contagem regressiva e, em seguida, chamamos a função de contagem regressiva a cada 1s após o carregamento da página.

Também precisaremos definir uma função para manipular quando a contagem regressiva terminar. Saberemos que o cronômetro terminou quando a diferença em nosso startCountdown função é inferior a 1 segundo.

const startCountdown = () => {
  const now = new Date().getTime();
  const countdown = new Date(countdownDate).getTime();

  const difference = (countdown - now) / 1000;

  if (difference < 1) {
    endCountdown();
  }
  
  ...
};

Isso é o que temos até agora!

6. Quando o cronômetro de contagem regressiva terminar

O que temos atualmente continua em contagem regressiva indefinidamente, o que claramente não é muito útil, então vamos remediar isso.

Na nossa endCountdown() função, vamos parar a função de intervalo, excluir o cronômetro e exibir a seção de conteúdo.

const endCountdown = () => {
  clearInterval(timerInterval);
  timer.remove();
  content.classList.add("visible");
};

Vamos direcionar a classe visível em CSS para lidar com a exibição do conteúdo. Nesta demonstração, temos uma escala de texto e uma animação de mudança de cor de fundo quando o conteúdo é exibido que também é manipulado com CSS. Claro, isso é apenas para fins demonstrativos - você pode estilizar as coisas como quiser.

#content h1 {
  font-size: 10vmax;
  transform: scale(1.25);
}

#content.visible {
  opacity: 1;
  animation: colorChange 1s ease-in-out 0.5s forwards;
}

#content.visible h1 {
  animation: scaleOut 1s ease-in-out 0.5s forwards;
}

@keyframes colorChange {
  from {
    color: #fcdf00;
    background-color: #0d67ad;
  }
  to {
    color: white;
    background-color: black;
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1.25);
  }
  to {
    transform: scale(1);
  }
}

Conclusão

E, com isso, criamos com sucesso um cronômetro de contagem regressiva para exibir conteúdo em uma página da web!