Du vet kanskje at interaktive komponenter forbedrer brukeropplevelsen til en webapplikasjon. Et slikt element er en “Animert teller” som kan brukes til å vise statistikk på nettstedet. Det brukes også til å vise antall besøkende, hvor mange medlemmer som har meldt seg på, eller hvor mange som spilte et online spill. Den samme funksjonaliteten kan oppnås ved bruk av statiske tall; Imidlertid hjelper animerte tellere med å gi nettstedet ditt et mer profesjonelt og uttrykksfullt utseende.

Dette innlegget vil diskutere fremgangsmåte av skape an animert teller i JavaScript. Så la oss starte!

Hvordan lage en animert teller i JavaScript

Vi vil nå lage en animert teller for å vise nummertellingen fra “0" til "1000”. For å gjøre det samme, følg de undergitte trinn-for-trinn-instruksjonene:

Trinn 1: Legg til HTML -elementer

Først av alt vil vi lage en HTML -fil som heter “myfile.html”Og spesifiser tittelen på søknaden vår som“Animert teller”I“" stikkord. Vi vil også koble vår JavaScript -fil "Testfile.JS”Og CSS -fil”min stil.CSS”Med“Myfile.html”På følgende måte:

I neste trinn vil vi legge til en overskrift ved hjelp av “

”Tag og en beholder med“" stikkord. “id" av "”Tag vil bli satt til“disk”:

La disken begynne!

Trinn 2: JavaScript -kode

Gå nå til JavaScript -filen din og bruk "setInterval ()”Metode for å kjøre“Oppdatert”Funksjon:

La Countts = SetInterval (oppdatert);

Deretter lage en "opp til”Variabel som representerer tellerens grense. Som utgangspunkt er verdien av "opp til”Variabel initialiseres til“0”:

la opp til = 0;

I “Oppdatert ()”Funksjon, vi vil først bruke“getElementById ()”Metode for å hente HTML -elementet med“disk”Id i“telle”Variabel. Etter det vil vi bruke "indrehtml”Eiendom til“telle”Variabel for å vise tellingen som sin indre tekst. Når “telle”Verdien vil nå“1000”,“ClearInterval ()”Metode vil stoppe utførelsen av programmet:

funksjon oppdatert ()
var count = dokument.getElementById ("Counter");
telle.indrehtml = ++ opp til;
if (opp til === 1000)

ClearInterval (teller);

Trinn 3: Stil HTML -elementer

For å forbedre utseendet til vår animerte motapplikasjon, vil vi style de ekstra HTML -elementene. For dette formålet vil vi for det første justere teksten som er til stede i "kropp" til "senter”Og legg også til en“bakgrunnsbilde”:

kropp
tekst-align: sentrum;
Bakgrunnsbilde: URL ('Counter.jpg ');

Deretter vil vi stille inn "farge" og "font-family" -egenskapene til den ekstra overskriften:

H1
Farge: RGB (0, 0, 2);
Font-Family: 'Courier New', Courier, Monospace;

Til slutt vil vi endre fargen på "disk”Container og spesifiser de ønskede verdiene for“Font-familie”,“skriftstørrelse”Og“fontstil" egenskaper:

div
Farge: RGB (37, 25, 5);
Font-Family: Courier;
Fontstørrelse: 200%;
Font-stil: normal;

Trinn 4: Kjør animert motapplikasjon

Etter å ha lagret den spesifiserte koden, åpner du HTML -filen til det animerte motprosjektet i nettleseren ved hjelp av "Live server" Utvidelse:

Slik ser vår animerte teller JavaScript -applikasjon som:

Konklusjon

An animert teller er opprettet i en JavaScript -applikasjon å vise nummersteller i en animert form som starter fra 0 og slutter med det angitte nummeret. Mange nettsteder bruker denne funksjonen for å gjøre websiden deres mer attraktiv. Du kan bruke en animert teller for å vise antall registrerte brukere, antall besøkende på nettstedet eller antall personer som spilte et online spill. Dette innlegget diskuterte prosedyren for å lage en animert teller i JavaScript.