JavaScript Count Up Timer

I timer svolgono un ruolo importante nell'organizzazione del nostro stile di vita in larga misura. Ad esempio, misurando gli intervalli di tempo, tenendo traccia del tempo trascorso e tempo rimanente in caso di gara, competizione, ecc. In tali casi, l'implementazione di un timer di conteggio si rivela uno strumento efficace per la gestione di tali tipi di scenari per una gestione adeguata del tempo.

Come implementare un timer di conto in JavaScript?

I seguenti approcci possono essere utilizzati per implementare un timer di conteggio in JavaScript:

• "setInterval ()" E "Matematica.pavimento()"Metodi.
• "setInterval ()" E "parseint ()"Metodi.
• "jQuery" Approccio.

Nella sezione seguente, gli approcci menzionati saranno illustrati per uno!

Approccio 1: implementa un timer di conteggio in JavaScript utilizzando setInterval () e matematica.Metodi di pavimento ()

IL "setInterval ()"Il metodo viene applicato per impostare un intervallo di tempo specifico su una funzione specifica da eseguire e"Matematica.pavimento()"Il metodo restituisce il valore intero più vicino. Questi metodi possono essere implementati per applicare un intervallo di tempo a una particolare funzione ed eseguire calcoli precisi per la corretta esecuzione del timer.

Sintassi

setInterval (funzione, millisecondi)

Nella sintassi sopra:

• "funzione"Si riferisce alla funzione su cui verrà applicato l'intervallo di tempo e"millisecondi"Punta l'intervallo di tempo impostato.

IL "Matematica.pavimento()Il metodo "prende il"valore"Essere formattati come parametro.

Esempio

Passare attraverso il seguente frammento di codice per comprendere il concetto dichiarato:

00:00:00

Stop Timer

Nella dimostrazione di cui sopra,

• Specificare l'intestazione contenente il formato del timer di conteggio.
• Successivamente, crea un pulsante con un allegato "al clic"Reindirizzamento dell'evento alla funzione"ClearInterval ()"Metodo con la variabile"Timer"Passato come parametro che contiene il"setInterval ()" metodo. Ciò comporterà la cancellazione dell'intervallo di tempo impostato sul clic del pulsante.

Ora, passa attraverso il seguente frammento di codice JavaScript:

var secondi = 0
var timer = setInterval (uptimer, 1000);
funzione uptimer ()
++secondi;
var hour = matematica.pavimento (secondi / 3600);
var minuto = matematica.pavimento ((secondi - ora * 3600) / 60);
var updsecond = secons - (ora * 3600 + minuto * 60);
documento.getElementById ("CountUp").INNERHTML = ora + ":" + minuto + ":" + updsecond;

Nel codice sopra:

• Inizializzare i secondi con "0". Inoltre, applica il metodo setInterval () sulla funzione uptimer () con un intervallo di tempo di “1000"Millisecondi.
• Successivamente, definisci una funzione chiamata "uptimer ()". Nella sua definizione, calcola il "ora"Dividendolo per il numero di secondi in un'ora e restituire il valore intero più vicino utilizzando il"Matematica.pavimento()" metodo.
• Allo stesso modo, calcola i minuti dividendo la sottrazione di entrambi (i secondi passati nel timer e il numero di secondi in un'ora) entro i minuti totali in un'ora.
• Il calcolo per l'incremento dei secondi nel timer verrà calcolato nell'ultimo passaggio.
• Tutti gli approcci sopra discussi possono essere evidenti come segue:

Funzionamento del timer:

Approccio 2: implementa un timer di conteggio in JavaScript utilizzando i metodi SetInterval () e ParseInt ()

IL "setInterval ()"Il metodo viene applicato in modo simile per impostare un intervallo di tempo specifico su una particolare funzione da eseguire e il"parseint ()"Il metodo analizza un valore come stringa e restituisce il primo numero intero. Questi metodi possono essere implementati in modo tale che la funzione esegui a un intervallo particolare e visualizzi il conteggio dei timer analizzando correttamente le cifre.

Sintassi

setInterval (funzione, millisecondi)

Nella sintassi sopra:

• "funzione"Si riferisce alla funzione su cui verrà applicato l'intervallo di tempo e"millisecondi"Punta l'intervallo di tempo impostato.

parseint (stringa, radix)

Nella sintassi data:

• "corda"Si riferisce alla stringa da analizzare.
• "radix"Il valore è"10"Per impostazione predefinita

Esempio

La dimostrazione di seguito donata spiega il concetto dichiarato:

Contaggio del timer per un'ora

= "minuti"> minuti: = "secondi"> secondi

Nel codice HTML sopra:

• All'interno del ""Tag, specifica l'intestazione.
• Dopodiché, includi il ""Tag per accumulare il timer di conteggio qui rispetto alla formattazione specificata per"minuti" E "Secondi".

Ora, passa attraverso il seguente frammento di codice JS:

var secondo = 0;
funzione uptimer (count) return count> 9 ? Conteggio: "0" + conta;
setInterval (function ()
documento.getElementById ("Seconds").InnerHtml = uptimer (++ secondo % 60);
documento.getElementById ("minuti").InnerHtml = uptimer (parseInt (secondo / 60, 10));
, 1000);

In questa parte del codice:

• Inizializza il "Secondi"Con 0.
• Successivamente, definisci la funzione denominata "uptimer ()".
• Questa funzione aggiunge uno zero leader e applica un controllo se il valore passato ad esso è una singola cifra i.E (<9). In such a case, it adds a leading zero.
• IL "setInterval ()"Metodo con un intervallo impostato di"1000"La SM verrà applicata all'ulteriore codice. Qui, il specificato "arco"Elemento per i secondi e i verbali saranno accessibili rispettivamente.
• Per "Secondi", I secondi inizializzati vengono incrementati e i 60 punti al limite di fine per i secondi. Successivamente, vengono passati come parametro alla funzione uptimer () e visualizzati nel DOM come tempo di campata discusso prima.
• Allo stesso modo, nel caso di "minuti", Calcola i minuti. Inoltre, applica il "parseint ()"Metodo per analizzare i minuti. Il primo parametro nel metodo indica la transizione del minuto al secondo i.E 60. Il secondo parametro come descritto nella sintassi è per impostazione predefinita su 10

L'esecuzione del codice sopra produrrà i seguenti risultati sul browser:

Si può osservare dall'output che il timer di conteggio funziona perfettamente.

Approccio 3: implementa un timer di conteggio in JavaScript utilizzando l'approccio jQuery

In questo approccio, JQuery può essere applicato utilizzando i suoi metodi per eseguire il requisito dato.

Sintassi

$ (selettore).html ()

Nella sintassi data:

• "selettore" si riferisce a "id"Contro l'elemento HTML.

Esempio

Le seguenti righe di codice spiegano il concetto dichiarato.

Contaggio del timer per 30 minuti

= "minuti"> minuti: = "secondi"> secondi

Nell'esempio sopra dato,

• Innanzitutto, includi il "jQuery" biblioteca.
• Ora, allo stesso modo, ripeti l'approccio sopra discusso per specificare il "minuti" E "Secondi" nel ""Tag.

var secondo = 0;
funzione uptimer (count) return count> 9 ? Conteggio: "0" + conta;
setInterval (function ()
$ ("#secondi").HTML (uptimer (++ secondo % 60));
$ ("#minuti").html (uptimer (parseint (secondo / 30, 10));
, 1000);

Nel codice JS sopra:

• Allo stesso modo, inizializza i secondi con "0".
• Ora, dichiara una funzione chiamata "uptimer ()".
• Nella sua definizione, ravviva i passaggi per applicare un controllo sul numero di cifre.
• Allo stesso modo, applica il “setInterval ()Metodo "con un"1000"Milisecondi intervallo di tempo sulla funzione specificata.
• Qui, applica il jQuery "html ()"Metodo per restituire il contenuto (InnerHTML) degli elementi riferendosi a loro come"Secondi", E "minuti"Rispettivamente.

Produzione

In questo articolo, sono illustrati tutti gli approcci per creare un timer di conto.

Conclusione

La combinazione di "setInterval ()" E "Matematica.pavimento()Metodi ", il"setInterval ()" E "parseint ()Metodi o il "jQuery"L'approccio può essere utilizzato per implementare un timer di conteggio utilizzando JavaScript. Il setInterval () e la matematica.I metodi di pavimento () possono essere implementati per applicare un intervallo di tempo specifico a una particolare funzione ed eseguire calcoli accurati per la corretta esecuzione del timer. I metodi setInteRVal () e ParseInt () possono essere utilizzati per eseguire ripetutamente una funzione a intervalli specifici e visualizzare correttamente il conteggio del timer. L'approccio jQuery può essere applicato per integrare l'elemento HTML ed eseguire la funzionalità richiesta. Questo articolo ha dimostrato all'implementazione di un timer di conto in JavaScript.