Você pode saber que os componentes interativos melhoram a experiência do usuário de um aplicativo da web. Um desses elementos é um “Counter animado” que pode ser usado para mostrar estatísticas no site. Também é utilizado para exibir o número de visitantes, quantos membros se inscreveram ou quantas pessoas jogaram um jogo online. A mesma funcionalidade pode ser alcançada usando números estáticos; No entanto, os contadores animados ajudam a dar ao seu site uma aparência mais profissional e expressiva.

Este post discutirá o procedimento de criando um contador animado em JavaScript. Então vamos começar!

Como criar um balcão animado em JavaScript

Agora criaremos um balcão animado para exibir a contagem de números de “0" para "1000”. Para fazer o mesmo, siga as instruções passo a passo abaixo:

Etapa 1: Adicione elementos HTML

Primeiro de tudo, criaremos um arquivo HTML chamado “meu arquivo.html”E especifique o título de nosso aplicativo como“Contador animado" no "" marcação. Também vamos vincular nosso arquivo JavaScript “TestFile.JS”E arquivo CSS“meu estilo.CSS" com "Meu arquivo.html" Da seguinte maneira:

Na próxima etapa, adicionaremos um título usando o “

”Tag e um contêiner com o“" marcação. O "eu ia" do "”A tag será definida como“contador”:

Deixe o balcão começar!

Etapa 2: Código JavaScript

Agora vá para o seu arquivo JavaScript e utilize o “setInterval ()”Método para executar o“Atualizada”Função:

Let counts = setInterval (atualizado);

Então, crie um “até”Variável que representa o limite do contador. Como ponto de partida, o valor do “até”A variável é inicializada para“0”:

deixe -se = 0;

No "Atualizada()”Função, primeiro usaremos o“getElementById ()”Método para buscar o elemento HTML com o“contador”ID no“contar" variável. Depois disso, utilizaremos o “Innerhtml"Propriedade do"contar”Variável para exibir a contagem como seu texto interno. Quando o "contar”O valor atingirá“1000", o "ClearInterval ()”Método interromperá a execução do programa:

função atualizada ()
var count = documento.getElementById ("contador");
contar.inerhtml = ++ até;
if (até === 1000)

ClearInterval (contagens);

Etapa 3: Elementos HTML de estilo

Para melhorar a aparência de nosso aplicativo de contador animado, modelaremos os elementos HTML adicionados. Para esse fim, em primeiro lugar, alinharemos o texto presente dentro do “corpo" para o "Centro”E também adicione um“imagem de fundo”:

corpo
Alinhamento de texto: centro;
Imagem de fundo: URL ('contador.jpg ');

Em seguida, definiremos as propriedades "cor" e "fontes" do cabeçalho adicionado:

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

Por fim, mudaremos a cor do “contador”Contêiner e especifique os valores desejados para o“família de fontes","tamanho da fonte" e "estilo de fonte”Propriedades:

div
Cor: RGB (37, 25, 5);
Font-Family: Courier;
Size de fonte: 200%;
estilo de fonte: normal;

Etapa 4: Execute o aplicativo de contador animado

Depois de salvar o código especificado, abra o arquivo HTML do seu contador animado no navegador com a ajuda do “Servidor vivoExtensão:

Aqui está como nosso aplicativo de JavaScript de Counter Animado se parece:

Conclusão

Um contador animado é criado em um Aplicativo JavaScript Para exibir o contador de números em uma forma animada a partir de 0 e terminando com o número especificado. Muitos sites empregam esse recurso para tornar sua página da web mais atraente. Você pode utilizar um balcão animado para mostrar o número de usuários registrados, o número de visitantes do site ou o número de pessoas que jogaram um jogo online. Este post discutiu o procedimento de criação de um balcão animado em JavaScript.