Creare un countdown ad una data in Javascript

In questo articolo vi propongo una funzione in Javascript che in pratica ci permette di visualizzare un countdown ad una determinata data in tempo reale.

Oltre ai classici ore/minuti/secondi, vi ho messo anche i mesi.

Potete sia visualizzare le singole parti, che tutto insieme.

Infine, resetto tutto se abbiamo superato la data di arrivo.

Ovviamente fateci le modifiche che vi servono:

function countDown() {
  const toDate = new Date("Dec 31, 2023 00:00:00");
  const countDownDate = toDate.getTime();

  const x = setInterval(function () {
    const fromDate = new Date();
    const now = fromDate.getTime();
    const distanza = countDownDate - now;

    const mm = (toDate.getFullYear() - fromDate.getFullYear()) * 12;
    mm -= fromDate.getMonth();
    mm += toDate.getMonth();
    const mesi = mm <= 0 ? 0 : mm;

    const giorni = Math.floor(distanza / (1000 * 60 * 60 * 24));
    const ore = Math.floor((distanza % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minuti = Math.floor((distanza % (1000 * 60 * 60)) / (1000 * 60));
    const secondi = Math.floor((distanza % (1000 * 60)) / 1000);

    document.getElementById("cnt_mesi").innerHTML = mesi;
    document.getElementById("cnt_giorni").innerHTML = giorni;
    document.getElementById("cnt_ore").innerHTML = ore;
    document.getElementById("cnt_min").innerHTML = minuti;
    document.getElementById("cnt_sec").innerHTML = secondi;
    document.getElementById("cnt_totale").innerHTML = giorni + "d " + ore + "h " + minuti + "m " + secondi + "s ";

    if (distanza < 0) {
      clearInterval(x);
      document.getElementById("cnt_mesi").innerHTML = "00";
      document.getElementById("cnt_giorni").innerHTML = "00";
      document.getElementById("cnt_ore").innerHTML = "00";
      document.getElementById("cnt_min").innerHTML = "00";
      document.getElementById("cnt_sec").innerHTML = "00";
      document.getElementById("demo").innerHTML = "FINE!";
    }
  }, 1000);
}

Enjoy!