Możesz wiedzieć, że interaktywne komponenty poprawiają wrażenia użytkownika aplikacji internetowej. Jednym z takich elementów jest „Animowany licznik” które można wykorzystać do pokazania statystyk na stronie internetowej. Jest również wykorzystywany do wyświetlania liczby odwiedzających, ilu członków zarejestrowało się lub ile osób grało w grę online. Tę samą funkcjonalność można osiągnąć przy użyciu liczb statycznych; Jednak animowane liczniki pomagają w zapewnieniu Twojej witrynie bardziej profesjonalnego i ekspresyjnego wyglądu.

Ten post omówi procedura z tworzenie jakiś animowany licznik W JavaScript. A więc zacznijmy!

Jak utworzyć animowany licznik w JavaScript

Teraz utworzymy animowany licznik do wyświetlania liczby z „0" Do "1000". Aby zrobić to samo, postępuj zgodnie z podobną pod względem poniżej instrukcji krok po kroku:

Krok 1: Dodaj elementy HTML

Przede wszystkim utworzymy plik HTML o nazwie „mój plik.html”I określ tytuł naszej aplikacji jako„Animowany licznik" w "”Tag. Będziemy również połączyć nasz plik JavaScript „test testowy.JS”I plik CSS„mój styl.CSS" z "Mój plik.html" w następujący sposób:

W następnym kroku dodamy nagłówek za pomocą „

”Tag i pojemnik z„”Tag. „„ID”„Tag zostanie ustawiony na„lada”:

Niech zacznij licznik!

Krok 2: Kod JavaScript

Teraz przejdź do pliku JavaScript i użyj „setInterval ()„Metoda uruchamiania„zaktualizowane”Funkcja:

Let Counts = setInterval (zaktualizowany);

Następnie stwórz „aż do„Zmienna reprezentująca granicę licznika. Jako punkt wyjścia wartość „aż do„Zmienna jest inicjowana do„0”:

Upuszczaj do = 0;

W "zaktualizowane ()„Funkcja najpierw użyjemy„getElementById ()„Metoda pobierania elementu HTML za pomocą„lada”Id w„liczyć" zmienny. Następnie wykorzystamy „InnerHtml„Własność„ „liczyć„Zmienna do wyświetlania liczby jako jej wewnętrznego tekstu. Kiedy "liczyć„Wartość dotrze”1000”,„clearInterval ()„Metoda zatrzyma wykonywanie programu:

funkcja aktualizowana ()
var liczba = dokument.getElementById („licznik”);
liczyć.innerhtml = ++ w górę;
if (do === 1000)

clearInterval (liczba);

Krok 3: Stylowe elementy HTML

Aby poprawić wygląd naszej animowanej aplikacji, będziemy stylizować dodane elementy HTML. W tym celu po pierwsze, wyrównujemy tekst obecny w „ciało" do "Centrum”A także dodaj„zdjęcie w tle”:

ciało
Text-Align: Center;
Image tła: URL („licznik.jpg ');

Następnie ustawimy właściwości „kolor” i „rody czcionki” dodanego nagłówka:

H1
Kolor: RGB (0, 0, 2);
Font-Family: „Courier New”, Courier, Monospace;

Na koniec zmienimy kolor „lada”Kontener i określ pożądane wartości dla„rodzina czcionek”,„rozmiar czcionki" I "styl czcionki" nieruchomości:

div
Kolor: RGB (37, 25, 5);
Font Family: Courier;
Rozmiar czcionki: 200%;
Styl czcionki: normalny;

Krok 4: Uruchom animowane aplikacja licznika

Po zapisaniu określonego kodu otwórz plik HTML swojego animowanego projektu w przeglądarce za pomocą „Serwer na żywo" rozszerzenie:

Oto jak wygląda nasza animowana aplikacja JavaScript:

Wniosek

Jakiś animowany licznik jest tworzony w Aplikacja JavaScript Aby wyświetlić licznik numeru w animowanym formularzu zaczynającym się od 0, a kończąc na określonej liczbie. Wiele stron internetowych wykorzystuje tę funkcję, aby ich strona internetowa była bardziej atrakcyjna. Możesz wykorzystać animowany licznik, aby pokazać liczbę zarejestrowanych użytkowników, liczbę odwiedzających witrynę lub liczbę osób, które grały w grę online. W tym poście omówiono procedurę tworzenia animowanego licznika w JavaScript.