Potresti sapere che i componenti interattivi migliorano l'esperienza utente di un'applicazione Web. Uno di questi elementi è un "Contatore animato" che può essere utilizzato per mostrare statistiche sul sito Web. Viene anche utilizzato per mostrare il numero di visitatori, quanti membri si sono iscritti o quante persone hanno giocato a un gioco online. La stessa funzionalità può essere ottenuta utilizzando numeri statici; Tuttavia, i contatori animati aiutano a dare al tuo sito Web un aspetto più professionale ed espressivo.

Questo post discuterà del procedura Di creazione UN contatore animato In JavaScript. Quindi iniziamo!

Come creare un contatore animato in JavaScript

Ora creeremo un contatore animato per la visualizzazione del conteggio dei numeri da "0" A "1000". Per fare lo stesso, segui le istruzioni passo-passo di seguito::

Passaggio 1: Aggiungi elementi HTML

Prima di tutto, creeremo un file HTML chiamato "il mio file.html"E specifica il titolo della nostra applicazione come"Contatore animato" nel ""Tag. Colletteremo anche il nostro file JavaScript "Testfile.js"E file CSS"il mio stile.CSS" con "Il mio file.html" nel seguente modo:

Nel prossimo passaggio, aggiungeremo un'intestazione usando il "

"Tag e un contenitore con il""Tag. IL "id"Del"Il tag sarà impostato su "contatore":

Lascia che il contatore inizi!

Passaggio 2: codice JavaScript

Ora spostati sul tuo file JavaScript e utilizza il "setInterval ()Metodo "per eseguire il"aggiornato" funzione:

let counts = setInterval (aggiornato);

Quindi, crea un "fino a"Variabile che rappresenta il limite del contatore. Come punto di partenza, il valore del "fino a"La variabile è inizializzata in"0":

Lasciar up to = 0;

Nel "aggiornato ()"Funzione, useremo innanzitutto"getElementById ()"Metodo per recuperare l'elemento HTML con il"contatore"ID in"contare"Variabile. Dopodiché, utilizzeremo il "Innerhtml"Proprietà del"contare"Variabile per visualizzare il conteggio come testo interno. Quando il "contare"Il valore raggiungerà"1000", IL "ClearInterval ()"Il metodo fermerà l'esecuzione del programma:

funzione aggiornata ()
var count = document.getElementById ("contatore");
contare.InnerHtml = ++ fino a;
if (fino a === 1000)

ClearInterval (conteggi);

Passaggio 3: Stile Elementi HTML

Per migliorare l'aspetto della nostra applicazione di contatore animato, modelleremo gli elementi HTML aggiunti. A tale scopo, in primo luogo, allineeremo il testo presente all'interno del "corpo" al "centro"E aggiungi anche un"immagine di sfondo":

corpo
Testo-align: centro;
Immagina di background: URL ('contatore.jpg ');

Quindi, imposteremo le proprietà "Colore" e "Font-Family" dell'intestazione aggiunta:

H1
Colore: RGB (0, 0, 2);
Font-Family: "Courier New", Courier, Monospace;

Infine, cambieremo il colore di "contatore"Container e specificare i valori desiderati per il"famiglia di font","dimensione del font" E "stile carattere" proprietà:

div
Colore: RGB (37, 25, 5);
Font-Family: corriere;
Font-size: 200%;
Font in stile: normale;

Passaggio 4: eseguire l'applicazione contatta animata

Dopo aver salvato il codice specificato, apri il file HTML del tuo contatore animato nel browser con l'aiuto di "Server live"Estensione:

Ecco come appare il nostro contatore animato JavaScript:

Conclusione

UN contatore animato è creato in a Applicazione JavaScript per visualizzare il contatore numerico in una forma animata a partire da 0 e termina con il numero specificato. Molti siti Web impiegano questa funzione per rendere la loro pagina web più attraente. Puoi utilizzare un contatore animato per mostrare il numero di utenti registrati, il numero di visitatori del sito Web o il numero di persone che hanno giocato un gioco online. Questo post ha discusso della procedura di creazione di un contatore animato in JavaScript.