WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
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
Copy
Christmas Countdown
Christmas Countdown
0
Days
0
Hours
0
Minutes
0
Seconds
CSS
Copy
body { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #3c3c3c; font-family: Arial, sans-serif; color: #fff; height: 100vh; margin: 0; } h1 { margin-bottom: 20px; font-size: 2.5em; } .countdown { display: flex; gap: 20px; } .time { background: #ff6347; padding: 20px; border-radius: 8px; text-align: center; width: 100px; } .time span { display: block; font-size: 2em; font-weight: bold; } .label { font-size: 1em; margin-top: 5px; }
JS
Copy
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);