Christmas Countdown HTML Template

1,150 0 Websites iroger7 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Christmas Countdown HTML Template

Recommended

7 September 2024

HTML Chat Box Template

12 December 2025

Flappy Bird HTML Canvas Game Template

19 October 2026

Blooming Purple Flowers Animation in HTML and CSS

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

Comments 0

…