Come creare un timer per il conto alla rovescia in JavaScript

I timer del conto alla rovescia sono una specie di orologi virtuali che contano l'ora fino a una data specifica per contrassegnare l'inizio o la fine di un'occasione speciale. Sono stati usati principalmente sulla pagina di destinazione dei nuovi siti Web in uscita, ma ora hanno trovato la loro strada nei siti Web di e-commerce.

L'elemento "Tempo sta esaurendo" nelle pagine del conto alla rovescia aiuta a creare urgenza per generare più conversioni sui siti Web di e-commerce. I timer possono anche essere utilizzati su siti Web o blog per visualizzare un conto alla rovescia per eventi speciali i.e. Anniversari, compleanni, incontri ecc. I timer per il conto alla rovescia possono anche essere utilizzati per contare il tempo fino a quando non diventa disponibile un'offerta

In questa guida pratico faremo un contatore di tempo in Vanilla Javascript, invece di utilizzare librerie o plugin di terze parti. I vantaggi della creazione dell'orologio del conto alla rovescia in Vanilla Javascript sono i seguenti:

• Il codice è più leggero perché non ci sono dipendenze.
• Migliora le prestazioni del sito Web in quanto non è necessario caricare fogli di stile e script esterni.

Come creare un timer per il conto alla rovescia in JavaScript

Le basi del timer del conto alla rovescia sono le seguenti:

Imposta la data di fine del timer

Il primo passo della creazione di un timer per il conto alla rovescia è impostare la data di fine del timer. In questo passaggio dichiareremo una variabile e gli assegneremo il valore della data di fine del nostro timer utilizzando il Data oggetto:

var enddate = new Date ('20 agosto 2021 00:00').prendi tempo();

Nell'esempio sopra abbiamo usato il .prendi tempo() metodo; Questo perché il .prendi tempo() Il metodo converte la data in un formato più utilizzabile. Restituisce il numero di millisecondi che sono passati dalla mezzanotte del 1 ° gennaio 1970, il che rende più facile eseguire operazioni matematiche sul data di fine variabile.

Funcion Event Event Funcion

Ora faremo un setInterval () funzione che eseguirà ripetutamente il codice al suo interno dopo l'intervallo di tempo specificato. Questo perché vogliamo aggiornare il nostro timer dopo ogni secondo:

var countdowntimer = setInterval (() =>
// Tutto il codice JavaScript menzionato di seguito va all'interno di questa funzione
, 1000);

IL setInterval () La funzione prende l'argomento dell'intervallo in millisecondi; Poiché ci sono 1000 millisecondi all'interno di un secondo e vogliamo aggiornare il contatore dopo ogni secondo, abbiamo dato 1000 come intervallo della funzione dell'evento di temporizzazione.

Calcolo del tempo

Ora scriveremo il codice all'interno del setInterval () funzione. In questo passaggio calcoleremo il tempo rimanente fino all'ora di fine del contatore:

var now = new Date ().prendi tempo();
var restaningtime = enddate - ora;

Ora il valore del tempo rimanente presente nella variabile tempo rimanente è sotto forma di millisecondi ma vogliamo mostrare il numero rimanente di giorni, ore, minuti e secondi, quindi dovremo convertire il numero di millisecondi nei nostri periodi di tempo richiesti:

const secondo = 1000;
const minuto = secondo * 60;
CONST Hour = Minute * 60;
const day = ora * 24;
DaySleft = matematica.trunc (rimanente / giorno);
Hoursleft = matematica.trunc ((restanti % giorno) / ora);
Minuteleft = matematica.trunc ((rimanente % ora) / minuto);
SecondSleft = matematica.trunc ((rimanente % minuto) / secondo);

Ci sono 1.000 millisecondi all'interno di un secondo, 60.000 millisecondi (1000*60) in un minuto, 3.600.000 millisecondi (1000*60*60) in un'ora e 86.400.000 millisecondi (1000*60*60*24).

Abbiamo calcolato i giorni rimasti dividendo la quantità di millisecondi presenti tempo rimanente dalla quantità di millisecondi in un giorno; Se sono rimasti 86.400.000 millisecondi, allora Daysleft sarà uguale a uno (86.400.000/86.400.000), se sono rimasti 172.800.000 millisecondi Daysleft sarà uguale a 2 (172.800.000/86.400.000) e così via. Il numero restituito dall'operazione (rimanente / giorno) sarà spesso un numero decimale, ma abbiamo solo bisogno della parte del numero intero, quindi abbiamo usato il Matematica.trun () metodo.

Per calcolare il Hoursleft Per la prima volta ci siamo sbarazzati dei giorni usando l'operatore del modulo. Quindi abbiamo calcolato le ore dal tempo rimanente. Possiamo calcolare il Minutesleft E SecondSleft variabili in modo simile.

Visualizzazione del timer

In questo passaggio aggiungeremo un po 'di codice (tag) nel corpo HTML; Quindi accederemo a quei tag in setInterval () funzione e modificarli per mostrare il timer sulla pagina web:

Dentro il setInterval () funzione:

documento.QuerySelector ('#Days').InnerHtml = DaySleft + 'Days';
documento.QuerySelector ('#ore').InnerHtml = Hoursleft + 'Hours';
documento.QuerySelector ('##minuti').InnerHtml = minutiLeft + 'minuti';
documento.QuerySelector ('#seconds').InnerHtml = SecondSleft + 'Seconds';

Ora aggiungeremo un po 'più di codice in setInterval () Funzione che verrà eseguita nel caso in cui il timer sia scaduto:

Se (tempo rimanente <= 0)
documento.Scrivi ('time up!');

Tutto sommato il file HTML per un timer per il conto alla rovescia dovrebbe assomigliare a questo:

Un timer per il conto alla rovescia è stato realizzato con successo; Ora puoi modellarlo usando CSS.

Conclusione

I timer di conto alla rovescia vengono presto utilizzati da siti Web live e da molti siti Web di e -commerce. I siti Web di eCommerce usano i timer per convincere il cliente a prendere decisioni rapide. La risoluzione di questo post è stata quella di esplorare la creazione di un timer per il conto alla rovescia in JavaScript.