Modelo HTML de contagem regressiva para o Natal

382 iroger7

Abrir no Editor Video Publique Seu Código

Modelo HTML de contagem regressiva para o Natal

Recomendado

24 June 2025

Elite Real Estate: Apartamentos, Vilas, Casas para Venda e Aluguel

2 March 2025

Um código por lebdev

16 January 2026

Incorpore jogos em Flash com o Ruffle Player

HTML

CSS

JS

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);

Recomendado

Elite Real Estate: Apartamentos, Vilas, Casas para Venda e Aluguel

Um código por lebdev

Incorpore jogos em Flash com o Ruffle Player

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS