Countdown Natale: codice JS per festività!

Hai mai voluto creare un countdown natalizio personalizzato per il tuo sito web o la tua applicazione? Sei nel posto giusto! In questo articolo, ti mostreremo il codice JavaScript per creare un timer di conto alla rovescia per le festività di Natale.

Per creare il tuo countdown, tutto ciò di cui hai bisogno è conoscere le basi di JavaScript e HTML. Una volta che hai creato un elemento HTML per visualizzare il timer, il codice JavaScript farà il resto. Il codice è semplice da capire anche per i principianti, ma potente abbastanza da personalizzare il tuo countdown come preferisci.

Usiamo la funzione getTimeRemaining per calcolare il tempo rimanente fino a Natale, quindi aggiorniamo il timer ogni secondo con la funzione initializeClock. Il codice è altamente personalizzabile, quindi puoi modificare facilmente il formato del timer, i colori, lo stile e molto altro ancora per adattarlo al tuo sito o alla tua applicazione.

Questo è solo un esempio di come la programmazione del codice può rendere le festività ancora più speciali. Grazie a JavaScript e HTML, puoi creare un countdown natalizio personalizzato che sarà perfetto per il tuo sito web o la tua applicazione. Che tu stia creando un sito web di e-commerce, un’app per bambini o semplicemente vuoi rendere il tuo sito più festoso, il countdown natalizio è un’aggiunta semplice e divertente.

HTML

<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

JavaScript

// Data di Natale (in formato ISO 8601)
const christmasDate = "2023-12-25T00:00:00Z";

// Funzione per calcolare il tempo rimanente
function getTimeRemaining(endtime) {
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor((total / 1000) % 60);
  const minutes = Math.floor((total / 1000 / 60) % 60);
  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  const days = Math.floor(total / (1000 * 60 * 60 * 24));
  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

// Funzione per aggiornare il conteggio alla pagina HTML
function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const daysSpan = clock.querySelector(".days");
  const hoursSpan = clock.querySelector(".hours");
  const minutesSpan = clock.querySelector(".minutes");
  const secondsSpan = clock.querySelector(".seconds");

  function updateClock() {
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ("0" + t.hours).slice(-2);
    minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
    secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

// Inizializzazione dell'orologio
initializeClock("clockdiv", christmasDate);

CSS

body {
  background-color: #2c3e50;
  background-image: linear-gradient(to bottom, #2c3e50, #3498db);
}

#clockdiv {
  font-family: 'Roboto', sans-serif;
  color: #fff;
  text-align: center;
  font-size: 48px;
}

#clockdiv > div {
  display: inline-block;
  margin: 0 30px;
}

#clockdiv > div > span {
  display: block;
  font-size: 80px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

#clockdiv > div > div.smalltext {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
}