Plantilla HTML de cuenta regresiva para Navidad

381 iroger7

Abrir en el editor Video Publica tu código

Plantilla HTML de cuenta regresiva para Navidad

Recomendado

9 November 2023

Menú de Pestañas en JavaScrip

11 October 2025

Fragmento de animación de carga de CSS

3 July 2025

Inicio de sesión y registro modernos | TheDoc

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

Recomendado

Menú de Pestañas en JavaScrip

Fragmento de animación de carga de CSS

Inicio de sesión y registro modernos | TheDoc

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS