HTML-Vorlage für einen Weihnachtscountdown

383 iroger7

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

HTML-Vorlage für einen Weihnachtscountdown

Empfohlen

18 October 2025

HTML-Beispiel für eine Regenbogen-Hover-Schaltfläche

22 November 2025

HTML-Vorlage für Cyberpunk-Anmeldeformular

24 June 2025

Elara Aydin: Persönliche Blog-HTML-Vorlage

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

Empfohlen

HTML-Beispiel für eine Regenbogen-Hover-Schaltfläche

HTML-Vorlage für Cyberpunk-Anmeldeformular

Elara Aydin: Persönliche Blog-HTML-Vorlage

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS