WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
Christmas Countdown
Christmas Countdown
0
Days
0
Hours
0
Minutes
0
Seconds
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; }
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);
Validating your code, please wait...
HTML
CSS
JS
Christmas Countdown
Christmas Countdown
0
Days
0
Hours
0
Minutes
0
Seconds
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; }
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);