Conto alla rovescia in JavaScript

Imposta il tag HTML per il timer

Nel codice sopra, il tag <h1> contiene la visualizzazione del timer. Usa questo codice nel codice HTML della tua pagina web. Il id="count-down-timer" è richiesto poiché si accede all’elemento in JavaScript con l’id count-down-timer per modificare dinamicamente il testo dell’elemento in fase di esecuzione.

<h1 class="text-center" id="count-down-timer"></h1>

Imposta il valore del timer

Una volta posizionato il tag, il passaggio successivo consiste nell’impostare il valore del tempo di conteggio. Di solito, le pagine web utilizzano un tempo hardcoded incorporato nel loro codice, che non è personalizzabile. Puoi impostare il timer nel metodo window.onload in time_minutes e time_seconds. Ad esempio, se desideri impostare un timer per un minuto e mezzo, imposta il codice come segue:

let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

Se desideri impostare per 3 minuti, imposta time_minutes = 3 e lascia time_seconds = 0. Ora, una volta eseguito il codice o ricaricato il codice HTML, è possibile ottenere l’output aggiornato.

L’esecuzione inizia con la funzione window.onload. Prende il valore del timer impostato dall’utente e calcola la durata totale del tempo in secondi.

let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

let duration = time_minutes * 60 + time_seconds;

document.querySelector('#count-down-timer') ottiene il nodo HTML dell’elemento. Questo nodo verrà utilizzato per aggiornare il valore del timer.

element = document.querySelector('#count-down-timer');

Una volta che l’elemento è disponibile, si inizializza con il valore da noi impostato. Ad esempio, nel codice, è di 1 minuto e 30 secondi. È impostato in un formato imbottito.

function paddedFormat(num) {
  return num < 10 ? '0' + num : num;
}

console.log(paddedFormat(3));
console.log(paddedFormat(12));

Produzione:

03
12

La funzione paddedFormat(num) restituisce il numero riempito. Per i minuti e i secondi, i valori a una cifra vengono riempiti anteponendo loro uno 0. Ad esempio, 2 minuti e 5 secondi vengono riempiti rispettivamente come 02 e 05.

element.textContent =
    `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

Successivamente, invochiamo la funzione startCountDown(--duration, element) passando duration in secondi e il nodo HTML dell’elemento di visualizzazione. Ora abbiamo visualizzato il valore 01:30. Quindi, abbiamo bisogno che il timer inizi da 01:29. Questo è il motivo per cui usiamo l’operatore unario decremento con durata --duration.

startCountDown(--duration, element);

startCountDown(duration, element) è il cuore del timer. In questo, usiamo la funzione setInterval(function(){}, 1000) di JavaScript per eseguire il timer dopo ogni secondo (1000 millisecondi) finché non viene cancellato o ucciso usando clearInterval(countInterval).

function startCountDown(duration, element) {
  let secondsRemaining = duration;
  let min = 0;
  let sec = 0;

  let countInterval = setInterval(function() {
    min = parseInt(secondsRemaining / 60);
    sec = parseInt(secondsRemaining % 60);

    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

    secondsRemaining = secondsRemaining - 1;
    if (secondsRemaining < 0) {
      clearInterval(countInterval)
    };
  }, 1000);
}

All’interno della funzione setinterval() vengono calcolati i minuti ei secondi per la visualizzazione. I minuti vengono calcolati dividendo il valore di remainingSeconds per 60 per ottenere il valore dei minuti e prendendo la sua parte intera.

let secondsRemaining = 89;
let min = parseInt(secondsRemaining / 60);
let sec = parseInt(secondsRemaining % 60);

console.log(secondsRemaining + 'seconds');
console.log(min);
console.log(sec);

Produzione:

89  // Equivalent to 1 min and 29 seconds
1
29

Successivamente, mostriamo i minuti e i secondi calcolati sulla pagina web impostando il testo usando l’attributo textContent dell’elemento del nodo HTML.

element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

Successivamente, il valore si riduce per secondsRemaining e la funzionalità timer viene eseguita ogni secondo con il metodo setInterval().

Infine, una volta che il valore secondsRemaining è 0, viene attivato clearInterval(countInterval) per fermare il timer. Assicura inoltre che il timer non venga riavviato o che vada a valori negativi.