Modelo HTML de contagem regressiva para o Natal

Abrir no Editor Publique Seu Código

Recomendado

8 September 2025

Trecho de animação do ponto de foco CSS

23 July 2025

const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');

function updateCountdown() {
  const now = new Date();
  let currentYear = now.getFullYear();

// Set Christmas date for the current year
  let christmas = new Date(`December 25, ${currentYear} 00:00:00`);

// If today's date is past Christmas, set countdown for next year's Christmas
  if (now > christmas) {
    christmas.setFullYear(christmas.getFullYear() + 1);
  }

const diff = christmas - now;

const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

daysEl.textContent = days;
  hoursEl.textContent = hours;
  minutesEl.textContent = minutes;
  secondsEl.textContent = seconds;
}

// Initial call to display the countdown immediately
updateCountdown();

// Update the countdown every second
setInterval(updateCountdown, 1000);

Modelo HTML de contagem regressiva para o Natal

Recomendado

Trecho de animação do ponto de foco CSS

Página de login

Enlouqueça

HTML

CSS

JS

Recomendado

Trecho de animação do ponto de foco CSS

Página de login

Enlouqueça

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS