JavaScript Count Up Timer

Timery odgrywają doskonałą rolę w organizowaniu naszego stylu życia w znacznym stopniu. Na przykład pomiar przedziałów czasowych, śledzenie upływu czasu i pozostały czas w przypadku wyścigu, konkurencji itp. W takich przypadkach wdrożenie licznika czasu okazuje się skutecznym narzędziem do obsługi tego rodzajów scenariuszy dla odpowiedniego zarządzania czasem.

Jak zaimplementować licznik czasu w JavaScript?

Następujące podejścia można wykorzystać do wdrożenia licznika czasu w JavaScript:

• "setInterval ()" I "Matematyka.podłoga()”Metody.
• "setInterval ()" I "parseint ()”Metody.
• "JQuery" Zbliżać się.

W poniższej sekcji wspomniane podejścia zostaną zilustrowane jeden po drugim!

Podejście 1: Wdrożenie licznika liczby w JavaScript za pomocą setInterval () i matematyki.metody podłogowe ()

„„setInterval ()”Metoda jest stosowana do ustawienia określonego przedziału czasowego na określoną funkcję do wykonania i„Matematyka.podłoga()”Metoda zwraca najbliższą wartość całkowitą w dół. Metody te można wdrożyć w celu zastosowania przedziału czasowego do konkretnej funkcji i wykonania precyzyjnych obliczeń dla prawidłowego wykonywania timera.

Składnia

setInterval (funkcja, milisekund)

W powyższej składni:

• "funkcjonować”Odnosi się do funkcji, w której zastosowano przedział czasowy i„milisekund”Wskazuje na ustalony przedział czasu.

„„Matematyka.podłoga()„Metoda przyjmuje„wartość„Aby sformatować jako jego parametr.

Przykład

Przejrzyj następujący fragment kodu, aby zrozumieć określoną koncepcję:

00:00:00

Zatrzymaj timer

W powyższej demonstracji,

• Określ nagłówek zawierający format licznika liczby.
• Następnie utwórz przycisk z załączonym „na kliknięcie„Przekierowanie zdarzeń do funkcji„clearInterval ()„Metoda o zmiennej”regulator czasowy„Przeszedł jako parametr, który zawiera„setInterval ()" metoda. Spowoduje to wyczyszczenie ustawionego przedziału czasu na kliknięciu przycisku.

Teraz przejdź przez następujący fragment kodu JavaScript:

var sekund = 0
var timer = setInterval (uptimer, 1000);
funkcja uptimer ()
++sekundy;
var hour = matematyka.podłoga (sekundy / 3600);
var minute = matematyka.podłoga ((sekundy - godzina * 3600) / 60);
var updsecond = sekundy - (godzina * 3600 + minuta * 60);
dokument.getElementById („hrabip”).innerhtml = hour + ":" + minuta + ":" + updsecond;

W powyższym kodzie:

• Zainicjuj sekundy za pomocą „0". Zastosuj także metodę setInterval () na funkcji uptimer () z przedziałem czasowym „1000„Milisekunds.
• Następnie zdefiniuj funkcję o nazwie „Uptimer ()". W swojej definicji oblicz „godzina”, Dzieląc go przez liczbę sekund na godzinę i zwracając najbliższą wartość całkowitą za pomocą„Matematyka.podłoga()" metoda.
• Podobnie oblicz minuty, dzieląc odejmowanie obu (minimalne sekundy w timerze i liczbie sekund na godzinę) przez łączną liczbę minut na godzinę.
• Obliczenia dla zwiększania sekund w timerze zostaną obliczone w ostatnim etapie.
• Wszystkie wyżej wymyślone podejścia mogą być widoczne w następujący sposób:

Działanie timera:

Podejście 2: Wdrożyć licznik liczby w JavaScript za pomocą metod setInterval () i parseint ()

„„setInterval ()„Metoda jest podobnie stosowana do ustawienia określonego przedziału czasu na określoną funkcję do wykonania i„parseint ()„Metoda analizuje wartość jako ciąg i zwraca pierwszą liczbę całkowitą. Metody te można wdrożyć w taki sposób, aby funkcja wykonuje się w określonym przedziale i wyświetla liczbę timera, prawidłowo analizując cyfry.

Składnia

setInterval (funkcja, milisekund)

W powyższej składni:

• "funkcjonować”Odnosi się do funkcji, w której zastosowano przedział czasowy i„milisekund”Wskazuje na ustalony przedział czasu.

Parseint (String, Radix)

W podanej składni:

• "strunowy”Odnosi się do przeanalizowania ciągu.
• "źródło" wartosc jest "10" domyślnie

Przykład

Poniższa demonstracja wyjaśnia określoną koncepcję:

Liczyć timer na godzinę

= "minuty"> minuty: = "sekundy"> sekundy

W powyższym kodzie HTML:

• W „„”Tag, określ nagłówek.
• Następnie uwzględnij „„Tag, aby zgromadzić tutaj licznik liczby w odniesieniu do określonego formatowania dla„minuty" I "sekundy".

Teraz przejdź przez następujący fragment kodu JS:

var second = 0;
funkcja uptimer (count) return crowin> 9 ? Count: „0” + liczba;
setInterval (function ()
dokument.getElementById („sekundy”).innerhtml = uptimer (++ drugi % 60);
dokument.GetElementById („Minute”).innerhtml = uptimer (parseint (druga / 60, 10));
, 1000);

W tej części kodu:

• Zainicjuj „sekundy”Z 0.
• Następnie zdefiniuj funkcję o nazwie „Uptimer ()".
• Ta funkcja dodaje wiodące zero i stosuje sprawdzenie, czy wartość przekazana do niej jest pojedyncza cyfra i.(e (<9). In such a case, it adds a leading zero.
• „„setInterval ()„Metoda z ustalonym przedziałem„1000”MS zostanie zastosowane do dalszego kodu. Tutaj określone „Zakres”Element na sekundy i minuty będą dostępne odpowiednio.
• Dla "sekundy”, Zainicjowane sekundy są zwiększane, a 60 punktów do granicy końcowej przez sekundy. Następnie są przekazywane jako parametr do funkcji uptimer () i wyświetlane w DOM jako czas omawiany wcześniej.
• Podobnie w przypadku „minuty”, Oblicz minuty. Zastosuj także „parseint ()„Metoda analizowania minut. Pierwszy parametr w metodzie wskazuje przejście minuty w drugim i.E 60. Drugi parametr opisany w składni jest domyślnie ustawiony na 10

Wykonanie powyższego kodu przyniesie następujące wyniki w przeglądarce:

Z wyjścia można zaobserwować, że licznik czasu działa idealnie.

Podejście 3: Wdrożenie licznika licznika w JavaScript przy użyciu podejścia jQuery

W tym podejściu jQuery można zastosować przy użyciu jego metod do wykonania danego wymogu.

Składnia

$ (selektor).html ()

W podanej składni:

• "selektor" odnosi się do "ID„Wbrew elementowi HTML.

Przykład

Następujące wiersze kodu wyjaśniają określoną koncepcję.

Licz licznik czasu przez 30 minut

= "minuty"> minuty: = "sekundy"> sekundy

W powyższym przykładzie,

• Po pierwsze, uwzględnij „JQuery" biblioteka.
• Podobnie powtórz wyżej wymyślone podejście do określenia „minuty" I "sekundy" w "”Tag.

var second = 0;
funkcja uptimer (count) return crowin> 9 ? Count: „0” + liczba;
setInterval (function ()
$ („#sekund”).HTML (Uptimer (++ Second % 60));
$ („#minuty”).HTML (Uptimer (Parseint (druga / 30, 10)));
, 1000);

W powyższym kodzie JS:

• Podobnie zainicjuj sekundy za pomocą „0".
• Teraz zadeklaruj funkcję o nazwie „Uptimer ()".
• W swojej definicji ożywiaj kroki zastosowania kontroli liczby cyfr.
• Podobnie zastosuj „setInterval ()„Metoda z„1000”Odstęp czasowy milisekund na określonej funkcji.
• Tutaj zastosuj jQuery „html ()„Metoda zwracania treści (innerHTML) elementów poprzez nazwanie ich„sekundy", I "minutyOdpowiednio.

Wyjście

W tym zapisie ilustrują wszystkie podejścia do utworzenia liczby.

Wniosek

Połączenie „setInterval ()" I "Matematyka.podłoga()„Metody,„setInterval ()" I "parseint ()”Metody lub„JQuery„Podejście można zastosować do wdrożenia licznika liczenia za pomocą JavaScript. SetInterval () i matematyka.Metody podłogowe () można wdrożyć w celu zastosowania określonego przedziału czasowego do konkretnej funkcji i wykonania dokładnych obliczeń w celu właściwego wykonywania timera. Metody setInterval () i parseint () można użyć do wielokrotnego wykonywania funkcji w określonych odstępach czasu i poprawnie wyświetlania liczby timera. Podejście JQuery można zastosować do zintegrowania elementu HTML i wykonania wymaganej funkcjonalności. W tym artykule wykazano wdrożenie licznika licznika w JavaScript.