Conto Alla Rovescia Javascript

exp | JavaScript | log | sin

Michael Zippo 04.11.2021

I timer per il conto alla rovescia sono utilizzati in tutta Internet da persone che vogliono fare il conto alla rovescia per un evento importante.

Puoi usare un timer per il conto alla rovescia per contare il lancio del tuo nuovo sito web. Un timer per il conto alla rovescia potrebbe segnare quando farai un annuncio di prodotto. Ci sono cosi tante possibilità da esplorare.

In questa guida, ti mostreremo come creare un conto alla rovescia in JavaScript utilizzando tre tecnologie: HTML, CSS e JavaScript. Cominciamo!

Impostazione della nostra pagina Web

Il primo passo è impostare la nostra pagina Web di base. In questa guida, non ci preoccuperemo dell’utilizzo di librerie esterne. Lo terremo semplice e utilizzeremo il vecchio HTML, CSS e JavaScript.

Cominciamo creando il nostro file HTML:

Il nostro codice non restituisce nulla di speciale in questo momento, vedi sotto:

sembra in questo modo perché abbiamo haven & rsquo ;t non ha ancora aggiunto alcuno stile al nostro codice o ha creato il nostro timer JavaScript. Passiamo alla creazione del JavaScript che alimenterà il nostro timer.

Creazione del nostro timer

JavaScript ha un pratico oggetto chiamato Date che possiamo usare per lavorare con date e ore. Utilizzeremo questo oggetto per due scopi: ottenere un timestamp del tempo a cui vogliamo contare e ottenere la data corrente.

In questo tutorial, noi&rsquo ;scriveremo tutti i nostri script in un etichetta. Non utilizzeremo alcuno script esterno.

Sottrarre la data alla quale stiamo effettuando il conto alla rovescia dalla nostra data corrente ci darà la differenza tra queste due date:

Questo codice calcolerà come mancano molti giorni al prossimo Star Wars Day, che è il 4 maggio 2021.

Anche se ora sappiamo la differenza tra questi due giorni, ci sono alcuni problemi. Primo, non Non ho ancora un timer che esegue il conto alla rovescia. In secondo luogo, la nostra data non è memorizzata in un formato facilmente leggibile dagli umani. è memorizzata in millisecondi, il che non è esattamente conveniente per noi. Dobbiamo convertire l’ora in giorni, ore e minuti.

Per calcolare il tempo rimanente in un formato più leggibile, utilizzeremo quanto segue codice:

Possiamo formattare i valori in una stringa utilizzando questo codice:

In questo codice, utilizziamo l’interpolazione di stringhe per sostituire i valori calcolati in precedenza. Questo ci darà un timestamp come: 314 giorni 13 ore 52 minuti.

Ora che abbiamo generato il nostro timestamp, possiamo inserirlo nella nostra pagina web:

Possiamo spostare tutti i nostri codice in una funzione:

Quando carichiamo la nostra pagina, viene restituito quanto segue:

Ora abbiamo il nostro timer. Abbiamo finito per oggi, giusto? No; non cosi in fretta. Se aspetti un minuto, vedrai che il nostro timer non effettua il conto alla rovescia. Questo perché dobbiamo dire al nostro browser di aggiornarsi ogni minuto. Lo facciamo usando questo codice:

Questo codice dovrebbe essere aggiunto dopo che la nostra funzione countdown() è stata dichiarata. Questo aggiornerà la nostra pagina ogni 60.000 millisecondi. Ciò equivale a ogni 60 secondi.