Countdown Passaporto 1 by @alessandrostano - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

classDefinisce una o più classi per elemento
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<option>Serve ad inserire una voce in un menu di selezione.
<input>Definisce un area di input per l'invio di dati e informazioni
<head>Tag primario di un documento HTML
methodDetermina il metodo di invio dei dati di un form al server

Users

Log in to search for users

Explore

Find inspiration

ricetta risotto primo tentativo

Due Sezioni - 4 colori (2x2)

TEST COLSPAN ROWSPAN

Review of Functions

informatica 13/10

BuzzTech Blog | News blog Magazine

Le meraviglie d\\

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html><html lang="it"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Countdown al 12/06/2023</title> <link rel="stylesheet" href="style.css"></head><body> <div class="container"> <h1>Countdown al 12/06/2023</h1> <p>Appuntamento per il rinnovo del passaporto</p> <div class="countdown"> <p id="days">30</p> <p>Giorni</p> <p id="hours">12</p> <p>Ore</p> <p id="minutes">30</p> <p>Minuti</p> <p id="seconds">15</p> <p>Secondi</p> </div> <button onclick="updateCountdown()">Aggiorna Countdown</button> <h2>Pagamenti (119€ cad.)</h2> <div class="payments"> <p>01/05/2023</p> <p>06/05/2023</p> <p>11/05/2023</p> <p>16/05/2023</p> <p>21/05/2023</p> </div> </div> <script src="script.js"></script></body></html>
<!DOCTYPE html>
<html lang="it">
<head>
  <!-- ... --> 
</head>
<body>
  <!-- ... -->
  
  <script>
    function updateCountdown() {
      // ...
    } 
  </script>
  
  <script src="script.js"></script>
</body>
</html> 
```

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');* { box-sizing: border-box;}body { font-family: 'Open Sans', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f2f2f2;}.container { background: white; padding: 2rem; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); width: 600px; text-align: center;}.countdown { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0;}button { background: #3366ff; color: #fff; border: none; padding: 1rem 2rem; border-radius: 5px; cursor: pointer; }.payments { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 2rem;}

function updateCountdown() { // Imposta la data di destinazione var countDownDate = new Date("June 12, 2023 00:00:00").getTime(); // Aggiorna il countdown ogni secondo var x = setInterval(function() { // Ottiene oggi's data e ora var now = new Date().getTime(); // Trova la differenza tra ora e la data di destinazione var distance = countDownDate - now; // Calcola giorni, ore, minuti e secondi var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Aggiorna DOM document.getElementById("days").innerText = days; document.getElementById("hours").innerText = hours; document.getElementById("minutes").innerText = minutes; document.getElementById("seconds").innerText = seconds; if (distance < 0) {clearInterval(x);document.getElementById("demo").innerHTML = "Countdown terminato";}}, 1000);}updateCountdown();