Countdown

**wasp31** · 11-06-2022, 10:11

Ciao mi servirebbe un aiuto. Ho creato un blocco html + css ed inserito un codice per il countdown giorni e ore e funziona regolarmente. Volevo per che al termine del conteggio nell'id dato all'elemento h1 comparisse una scritta ma non capisco dove è l'errore, vi riporto il codice.
Grazi mille

codice:

<script type="text/javascript">
    function updateTimer() {
        future = Date.parse("jun 06, 2022");
        now = new Date();
        diff = future - now;
        days = Math.floor(diff / (1000 * 60 * 60 * 24));
        hours = Math.floor(diff / (1000 * 60 * 60));
    
        d = days;
        h = hours - days * 24;
    
        document.getElementById("timer")
            .innerHTML =
            '<div>' + d + '<span>Giorni</span></div>' +
            '<div>' + h + '<span>Ore</span></div>';
    
      if (timer = 0) {
          document.getElementById("headline")
                innerText = "Evento in corso!";
      }
    
    }
     setInterval('updateTimer()', 1000);
</script>

**alka** · 11-06-2022, 11:59

La variabile timer che usi nell'istruzione if (timer = 0) { dove è stata definita o valorizzata?

**wasp31** · 11-06-2022, 15:22

Mh... non sono un grande esperto. Effettivamente non è definita o meglio il div html è <div id="timer"> </div>, ho pensato solo di richiamare id timer dell'elemento. Come potrei definirla?
Grazie

**ninja72** · 11-06-2022, 19:50

codice:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>countdown test</title>
  <style>
    #countdown {
      display: flex;
    }

    .endcountdown {
      text-decoration: line-through;
    }
  </style>
</head>

<body>

  <div id="headline"></div>
  <div id="countdown"></div>

  <script>

    const headline = document.getElementById("headline")
    const countdown = document.getElementById('countdown')
    const future = Date.parse("jun 15, 2022 19:46:59")

    function updateTimer() {
 
      const now = new Date()
      const diff = future - now
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
      const minutes = Math.floor((diff / 1000 / 60) % 60)
      const seconds = Math.floor((diff / 1000) % 60)

      if (diff < 0) {
        headline.textContent = "Evento in corso!"
        countdown.textContent =
          `0 Giorni
          0 Ore
          0 Minuti
          0 Secondi
       `
        countdown.classList.add('endcountdown')
        clearInterval(CountDownTimer)
      } else {
        countdown.textContent =
          `${days} Giorni
          ${hours} Ore
          ${minutes} Minuti
          ${seconds} Secondi
       `
      }
    }

    const CountDownTimer = (() => setInterval(updateTimer, 1000))()

  </script>

</body>

</html>

**wasp31** · 15-06-2022, 09:12

Ok grazie, ho provato anche modificando ma non riesco. Provo ad inserie tutto il mio codice forse qualche elemento lo sbaglio a mettere.

<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet" />
<style media="screen" type="text/css">
#timer {
font-size: 3em;
font-weight: 100;
color: white;
padding: 20px;
width: 100%;
color: white;

}

#timer div {
display: inline-block;
text-align: center;
min-width: 90px;
padding: 15px;
background: #020b43;
border-radius: 10px;
border: 2px solid #030d52;
margin: 15px;
}

#timer div span {
color: #ffffff;
display: block;
margin-top: 15px;
font-size: .35em;
font-weight: 400;
}
.center {
text-align: center;
}
</style>
<div class="center">
<h1 id="headline">Prossimo Evento</h1>
<h2 style="text-align: center;"><span style="color:#2980b9;"><strong>Webinar Bilanci</strong></span></h2>
<div id="timer"> </div>
<div><a class="btn btn-primary shadow p-2 -md rounded-pill" target="_blank" href="#">Visualizza Evento</a></div>
</div>
<script type="text/javascript">
function updateTimer() {
future = Date.parse("jun 06, 2022");
now = new Date();
diff = future - now;
days = Math.floor(diff / (1000 * 60 * 60 * 24));
hours = Math.floor(diff / (1000 * 60 * 60));

d = days;
h = hours - days * 24;

document.getElementById("timer")
.innerHTML =
'<div>' + d + '<span>Giorni</span></div>' +
'<div>' + h + '<span>Ore</span></div>';

if (timer = 0) {
document.getElementById("headline")
.innerHTML = "Evento in corso!";
}

}
setInterval('updateTimer()', 1000);
</script>

**alka** · 15-06-2022, 11:24