Jak utworzyć licznik czasu odliczania w JavaScript

Odliczanie timery są rodzajem wirtualnych zegarów, które liczą czas do konkretnej daty, aby zaznaczyć początek lub koniec specjalnej okazji. Były one głównie używane na stronie docelowej nowych nadchodzących stron internetowych, ale teraz znalazły się na stronach internetowych e-commerce.

Element „czasowy czas” na stronach odliczania pomaga w pilnej potrzebie generowania większej liczby konwersji na stronach e-commerce. Timery mogą być również używane na stronach internetowych lub blogach, aby wyświetlić odliczanie na specjalne wydarzenia I.mi. rocznice, urodziny, spotkania itp. Odliczanie czasu można również użyć do odliczania czasu, aż będzie dostępna oferta

W tym instrukcji instruktażowej stworzymy licznik czasu w waniliowym JavaScript, zamiast używać bibliotek lub wtyczek stron trzecich. Korzyści z tworzenia zegara odliczającego w waniliowym JavaScript są następujące:

• Kod jest lżejszy, ponieważ nie ma zależności.
• Poprawia wydajność strony internetowej, ponieważ nie ma potrzeby ładowania żadnych zewnętrznych arkuszy i skryptów.

Jak utworzyć licznik czasu odliczania w JavaScript

Podstawy czasu odliczania są następujące:

Ustaw datę zakończenia timera

Pierwszym krokiem polegającym na utworzeniu czasu odliczania jest ustawienie daty zakończenia timera. W tym kroku zadeklarujemy zmienną i przypisujemy ją wartość daty końcowej naszego czasu za pomocą Data obiekt:

var enddate = nowa data („20 sierpnia 2021 00:00:00”).uzyskać czas();

W powyższym przykładzie użyliśmy .uzyskać czas() metoda; To dlatego, że .uzyskać czas() Metoda przekształca datę w bardziej użyteczny format. Zwraca liczbę milisekund, które minęły od północy 1 stycznia 1970 roku, co ułatwia wykonywanie operacji matematycznych na Data końcowa zmienny.

Zrób funcion wydarzenia w czasie

Teraz zrobimy setInterval () funkcja, która wielokrotnie wykona kod w nim po określonym przedziale czasu. Jest tak, ponieważ po każdej sekundzie chcemy aktualizować nasz timer:

var countdownTimer = setInterval (() =>
// Cały poniższy kod JavaScript, wchodzi do tej funkcji
, 1000);

setInterval () Funkcja przyjmuje argument przedziałowy w milisekundach; Ponieważ w ciągu sekundy jest 1000 milisekund i chcemy odświeżyć licznik po każdej sekundzie, podaliśmy 1000 jako przedział funkcji zdarzenia rozrządu.

Obliczanie czasu

Teraz napiszemy kod w środku setInterval () funkcjonować. W tym kroku obliczymy czas pozostały do ​​czasu zakończenia licznika:

var teraz = nowa data ().uzyskać czas();
var pozostały czas = enddate - teraz;

Teraz wartość pozostałego czasu obecnego w zmiennej pozostały czas jest w postaci milisekund, ale chcemy pokazać pozostałą liczbę dni, godzin, minut i sekund, abyśmy musieli przekształcić liczbę milisekund na nasze wymagane okresy:

const second = 1000;
const minute = drugi * 60;
const hour = minuta * 60;
Const Day = godzina * 24;
Daysleft = Math.trunc (pozostały czas / dzień);
GODZINYLETT = matematyka.trunc ((pozostały % dnia) / godzinę);
minuty. Matematyka.trunc ((pozostały czas na godzinę) / minutę);
sekundsleft = matematyka.trunc ((pozostały czas % minuty) / sekunda);

W drugiej, 60 000 milisekund jest 1000 milisekund (1000*60) w minucie, 3600 000 milisekund (1000*60*60) w godzinach i 86 400 000 milisekund (1000*60*60*24) w ciągu dnia.

Obliczyliśmy dni, dzieląc ilość milisekund obecnych w pozostały czas według liczby milisekund w ciągu jednego dnia; Jeśli pozostało 86 400 000 milisekund, wtedy Pozostałe dni będzie równe jednemu (86 400 000/86 400 000), jeśli pozostało wówczas 172 800 000 milisekund Pozostałe dni będzie równe 2 (172 800 000/86 400 000) i tak dalej. Liczba zwrócona przez operację (pozostały czas / dzień) będzie najczęściej liczbą dziesiętną, ale potrzebujemy tylko części liczbowej, więc użyliśmy Matematyka.Trun () metoda.

Aby obliczyć pozostały godziny Po raz pierwszy pozbyliśmy się dni, korzystając z operatora modułu. Następnie obliczyliśmy godziny od pozostałego czasu. Możemy obliczyć Pozostałe minuty I sekundowy zmienne podobnie.

Wyświetlanie timera

W tym kroku dodamy trochę kodu (tagów) do ciała HTML; Następnie będziemy uzyskiwać dostęp do tych tagów w setInterval () Funkcja i zmodyfikuj je, aby pokazać licznik czasu na stronie internetowej:

W środku setInterval () funkcjonować:

dokument.querySelelector („#dni”).innerHtml = DAYLEFT + „DAY”;
dokument.querySelelector („#godziny”).innerhtml = godzinleft + „godziny”;
dokument.querySelelector („#minuty”).innerhtml = minuteLft + „Minute”;
dokument.QuerySelelect („#sekund”).innerHtml = sekundsleft + „sekundy”;

Teraz dodamy więcej kodu w setInterval () Funkcja, która zostanie wykonana na wypadek, gdyby licznik czasu:

if (pozostały czas <= 0)
dokument.Napisz („czas upał!');

W sumie plik HTML dla licznika czasu odliczania powinien wyglądać mniej więcej tak:

Z powodzeniem został z powodzeniem wykonany; Teraz możesz go stylizować za pomocą CSS.

Wniosek

Timery odliczania są wykorzystywane wkrótce do witryn na żywo, a także wielu stron internetowych eCommerce. Witryny e -commerce wykorzystują liczniki czasu, aby przekonać klienta do szybkiego podejmowania decyzji. Rozwiązanie tego postu polegało na zbadaniu tworzenia czasu odliczania w JavaScript.