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

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

30 November 2024

Page de destination – Maquillage

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

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

Recommandé

Page de destination – Maquillage

chargement de l'animation

Metehan

HTML

CSS

JS

Recommandé

Page de destination – Maquillage

chargement de l'animation

Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS