Plantilla HTML de cuenta regresiva para Navidad

87 iroger7

Abrir en el editor Publica tu código

Plantilla HTML de cuenta regresiva para Navidad

Recomendado

24 November 2025

Diseño de sitios web con HTML y 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);

Plantilla HTML de cuenta regresiva para Navidad

Recomendado

Clic de cookies

Arte de texto

Diseño de sitios web con HTML y CSS

HTML

CSS

JS

Recomendado

Clic de cookies

Arte de texto

Diseño de sitios web con HTML y CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS