countdown passaporto 2 by @alessandrostano - Codewith.it

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

Referenze

<blockquote>Inserisce citazioni in un documento HTML
<li>Inserisce voci all'interno di una lista
_topApre collegamenti ipertestuali nell'elemento parent assoluto
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
minImposta il valore numerico o temporale minimo per un elemento input
<h5>Titolo di intestazione di quinto livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Estrazione Casuale Studenti

ricetta risotto primo tentativo

pagina_completa.html

Mostra/nascondi password

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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 id="updateButton">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> <script src="script.js"></script> </div></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() { // Set the countdown date const countDownDate = new Date("June 12, 2023 00:00:00").getTime(); // Update the countdown every second const x = setInterval(function() { // Get today's date and time const now = new Date().getTime(); // Find the distance between now and the countdown date const distance = countDownDate - now; // Calculate days, hours, minutes, and seconds const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); // Update the DOM const daysElement = document.getElementById("days"); const hoursElement = document.getElementById("hours"); const minutesElement = document.getElementById("minutes"); const secondsElement = document.getElementById("seconds"); if (daysElement && hoursElement && minutesElement && secondsElement) { daysElement.innerText = days; hoursElement.innerText = hours; minutesElement.innerText = minutes; secondsElement.innerText = seconds; } // If the countdown is over, stop updating if (distance < 0) { clearInterval(x); const countdownElement = document.getElementById("countdown"); if (countdownElement) { countdownElement.innerHTML = "Countdown terminato"; } } }, 1000);}// Call the updateCountdown function when the page is loadedwindow.addEventListener("load", updateCountdown);// Call the updateCountdown function when the button is clickedconst updateButton = document.getElementById("updateButton");if (updateButton) { updateButton.addEventListener("click", updateCountdown);}