Modèle HTML de compte à rebours de Noël

71 iroger7

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 December 2025

Conception de formulaire de connexion animé CSS

21 July 2025

Exemple HTML CSS de carte UNO

5 July 2025

Panneau de connexion et d'inscription Glassy V3 de TheDoc

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

Recommandé

Conception de formulaire de connexion animé CSS

Exemple HTML CSS de carte UNO

Panneau de connexion et d'inscription Glassy V3 de TheDoc

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS