JavaScript Count Up Timer

Tidtakere spiller en stor rolle i å organisere livsstilen vår i stor grad. For eksempel måle tidsintervaller, holde et spor av den forløpte tiden og gjenværende tid i tilfelle et løp, konkurranse osv. I slike tilfeller viser implementering av en tellingstimer å være et effektivt verktøy for å håndtere slike typer scenarier for passende tidsstyring.

Hvordan implementere en telling av timer i JavaScript?

Følgende tilnærminger kan brukes til å implementere en tellingstimer i JavaScript:

• “setInterval ()”Og“Matte.gulv()”Metoder.
• “setInterval ()”Og“parseint ()”Metoder.
• “jQuery" Nærme seg.

I avsnittet nedenfor vil de nevnte tilnærmingene bli illustrert en etter en!

Tilnærming 1: Implementere en telling av timer i JavaScript ved bruk av SetInterval () og Math.gulv () metoder

“setInterval ()”Metode brukes for å angi et spesifikt tidsintervall på en spesifikk funksjon for å utføre og“Matte.gulv()”Metoden returnerer nærmeste heltallverdi. Disse metodene kan implementeres for å anvende et tidsintervall på en bestemt funksjon og utføre presise beregninger for riktig utførelse av timeren.

Syntaks

setInterval (funksjon, millisekunder)

I syntaks ovenfor:

• “funksjon”Refererer til funksjonen som tidsintervallet vil bli brukt og“millisekunder”Peker på det faste tidsintervallet.

“Matte.gulv()”Metoden tar“verdi”For å formateres som parameter.

Eksempel

Gå gjennom følgende kodebit for å forstå det uttalte konseptet:

00:00:00

Stopp tidtakeren

I demonstrasjonen ovenfor,

• Spesifiser overskriften som inneholder formatet til tellingstimeren.
• Etter det, lag en knapp med en vedlagt “ved trykk”Hendelse omdirigerer til funksjonen”ClearInterval ()”Metode som har variabelen”Timer”Passert som parameter som inneholder“setInterval ()”Metode. Dette vil resultere i å tømme det angitte tidsintervallet på knappeklikk.

Gå nå gjennom følgende JavaScript -kodeutdrag:

var sekunder = 0
var timer = setInterval (Uptimer, 1000);
funksjon uptimer ()
++sekunder;
var time = matematikk.gulv (sekunder / 3600);
var minutt = matematikk.gulv ((sekunder - time * 3600) / 60);
var updSecond = sekunder - (time * 3600 + minutt * 60);
dokument.GetElementById ("Countup").indrehtml = time + ":" + minutt + ":" + updscond;

I koden ovenfor:

• Initialiser sekundene med “0”. Bruk også SetInterval () -metoden på funksjonen Uptimer () med et tidsintervall av “1000”Millisekunder.
• Etter det, definer en funksjon som heter “uptimer ()”. I sin definisjon beregner du “time”Ved å dele det med antall sekunder på en time og returnere nærmeste heltallverdien ved å bruke“Matte.gulv()”Metode.
• Tilsvarende beregne minuttene ved å dele subtraksjonen av begge (de passerte sekundene i tidtakeren og antall sekunder på en time) med de totale minuttene på en time.
• Beregningen for å øke sekundene i tidtakeren vil bli beregnet i siste trinn.
• Alle de ovennevnte tilnærmingene kan være tydelige som følger:

Arbeid av tidtakeren:

Tilnærming 2: Implementere en count up timer i JavaScript ved bruk av SetInterval () og ParseInt () -metoder

“setInterval ()”Metode brukes på samme måte for å angi et bestemt tidsintervall på en bestemt funksjon som skal utføres og“parseint ()”Metode analyserer en verdi som en streng og returnerer det første heltallet. Disse metodene kan implementeres slik at funksjonen kjøres med et bestemt intervall og viser tidtaktellingen ved å analysere sifrene riktig i det.

Syntaks

setInterval (funksjon, millisekunder)

I syntaks ovenfor:

• “funksjon”Refererer til funksjonen som tidsintervallet vil bli brukt og“millisekunder”Peker på det faste tidsintervallet.

Parseint (String, Radix)

I den gitte syntaks:

• “streng”Refererer til strengen som skal analyseres.
• “Radix”Verdien er“10”Som standard

Eksempel

Den undergitte demonstrasjonen forklarer det uttalte konseptet:

Tell opp tidtakeren i en time

= "minutter"> minutter: = "sekunder"> sekunder

I ovennevnte HTML -kode:

• Innen "”Tag, spesifiser overskriften.
• Etter det, inkluder "”Tag for å akkumulere tellingstimeren her med hensyn til den spesifiserte formateringen for“minutter”Og“sekunder”.

Gå gjennom følgende JS -kodebit:

var sekund = 0;
funksjon uptimer (count) returtelling> 9 ? telle: "0" + telling;
setInterval (funksjon ()
dokument.getElementById ("Seconds").InnerHTML = UPTIMER (++ Second % 60);
dokument.getElementById ("minutter").InnerHTML = Uptimer (ParseInt (andre / 60, 10));
, 1000);

I denne delen av koden:

• Initialiser “sekunder”Med 0.
• Etter det, definer funksjonen som heter “uptimer ()”.
• Denne funksjonen legger til en ledende null og bruker en sjekk om verdien som er gitt til den er et enkelt siffer i.e (<9). In such a case, it adds a leading zero.
• “setInterval ()”Metode med et fast intervall av“1000”MS vil bli brukt på den videre koden. Her, den spesifiserte “spenn”Element for sekundene og minuttene vil nås henholdsvis.
• For “sekunder”De initialiserte sekundene økes og de 60 poengene til sluttgrensen i sekunder. Etter det blir de passert som en parameter til funksjonen Uptimer () og vises i DOM som en spenntid diskutert før.
• Tilsvarende i tilfelle av "minutter”, Beregn protokollen. Bruk også “parseint ()”Metode for å analysere protokollen. Den første parameteren i metoden indikerer overgangen til minuttet på sekundet i.E 60. Den andre parameteren som beskrevet i syntaks er som standard satt til 10

Å utføre koden ovenfor vil gi følgende resultater i nettleseren:

Det kan observeres fra utgangen at tellingstimeren fungerer perfekt.

Tilnærming 3: Implementere en telling av timer i JavaScript ved hjelp av jQuery -tilnærmingen

I denne tilnærmingen kan jQuery brukes ved å bruke metodene for å utføre det gitte kravet.

Syntaks

$ (velger).html ()

I den gitte syntaks:

• “velger”Refererer til“id”Mot HTML -elementet.

Eksempel

Følgende kodelinjer Forklar det angitte konseptet.

Tell opp tidtakeren i 30 minutter

= "minutter"> minutter: = "sekunder"> sekunder

I det ovennevnte eksemplet,

• Først må du ta med "jQuery”Bibliotek.
• Nå, på samme måte, gjenta den ovennevnte tilnærmingen for å spesifisere “minutter”Og“sekunder”I“" stikkord.

var sekund = 0;
funksjon uptimer (count) returtelling> 9 ? telle: "0" + telling;
setInterval (funksjon ()
$ ("#Seconds").HTML (UPTIMER (++ sekunders % 60));
$ ("#minutter").HTML (Uptimer (Parseint (andre / 30, 10)));
, 1000);

I ovennevnte JS -kode:

• Tilsvarende initialiser sekundene med "0”.
• Nå, erklærer en funksjon som heter “uptimer ()”.
• I sin definisjon, gjenopplive trinnene for å bruke en sjekk på antall sifre.
• På samme måte, bruk "setInterval ()”Metode med en“1000”Millisekunder tidsintervall på den spesifiserte funksjonen.
• Her, bruk jQuery “html ()”Metode for å returnere innholdet (indrehtml) av elementene ved å referere til dem som“sekunder”, Og“minutterHenholdsvis.

Produksjon

I denne oppskrivningen illustreres alle tilnærminger for å lage en tellingstimer.

Konklusjon

Kombinasjonen av “setInterval ()”Og“Matte.gulv()”Metoder,“setInterval ()”Og“parseint ()”Metoder eller“jQuery”Tilnærming kan brukes til å implementere en tellingstimer ved hjelp av JavaScript. SetInterval () og matematikken.Gulv () Metoder kan implementeres for å bruke et spesifikt tidsintervall på en bestemt funksjon og utføre nøyaktige beregninger for riktig utførelse av tidtakeren. SetInterval () og ParseInt () -metodene kan brukes til å utføre en funksjon med spesifikke intervaller gjentatte ganger og vise timertallet riktig. JQuery -tilnærmingen kan brukes for å integrere HTML -elementet og utføre den nødvendige funksjonaliteten. Denne artikkelen demonstrerte for implementering av en tellende tidtaker i JavaScript.