Es posible que sepa que los componentes interactivos mejoran la experiencia del usuario de una aplicación web. Uno de esos elementos es un "Contador animado" que se pueden usar para mostrar estadísticas en el sitio web. También se utiliza para mostrar el número de visitantes, cuántos miembros se han registrado o cuántas personas jugaron un juego en línea. La misma funcionalidad se puede lograr usando números estáticos; Sin embargo, los contadores animados ayudan a darle a su sitio web una apariencia más profesional y expresiva.

Esta publicación discutirá el procedimiento de creación un mostrador animado en Javascript. Entonces, comencemos!

Cómo crear un mostrador animado en JavaScript

Ahora crearemos un contador animado para mostrar el recuento de números desde "0" a "1000". Para hacer lo mismo, siga las instrucciones paso a paso detenidas:

Paso 1: Agregar elementos HTML

En primer lugar, crearemos un archivo HTML llamado "mi archivo.html"Y especifique el título de nuestra aplicación como"Mostrador animado" en el "" etiqueta. También vincularemos nuestro archivo JavaScript "archivo de prueba.js"Y archivo CSS"mi estilo.CSS" con "Mi archivo.html" de la siguiente manera:

En el siguiente paso, agregaremos un encabezado usando el "

"Etiqueta y un contenedor con el"" etiqueta. El "identificación" del ""La etiqueta se establecerá en"encimera":

Deja que comience el mostrador!

Paso 2: código JavaScript

Ahora muévase a su archivo JavaScript y utilice el "setInterval ()Método "para ejecutar el"actualizado" función:

Let Counts = SetInterval (actualizado);

Entonces, crea un "hasta"Variable que representa el límite del mostrador. Como punto de partida, el valor del "hasta"La variable se inicializa a"0":

dejar hasta = 0;

En el "actualizado()"Función, primero usaremos el"getElementById ()"Método para obtener el elemento HTML con el"encimera"ID en el"contar" variable. Después de eso, utilizaremos el "innerhtml"Propiedad del"contar"Variable para mostrar el recuento como su texto interno. Cuando el "contar"El valor alcanzará"1000", el "ClearInterval ()El método "detendrá la ejecución del programa:

función actualizada ()
VAR count = documento.getElementByid ("contador");
contar.innerhtml = ++ upto;
if (hasta === 1000)

ClearInterval (cuenta);

Paso 3: Elementos HTML de estilo

Para mejorar la apariencia de nuestra aplicación de contador animado, peinaremos los elementos HTML agregados. Para este propósito, en primer lugar, alinearemos el texto presente dentro del "cuerpo" hacia "centro"Y también agregue un"imagen de fondo":

cuerpo
Text-Align: Center;
IMAGEN DE ACTUALO: URL ('contador.jpg ');

Luego, estableceremos las propiedades de "color" y "Fuente-Familia" del encabezado agregado:

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

Por último, cambiaremos el color del "encimera"Contenedor y especifique los valores deseados para el"Familia tipográfica","tamaño de fuente" y "Estilo de fuente" propiedades:

div
Color: RGB (37, 25, 5);
Font-Family: Courier;
tamaño de fuente: 200%;
estilo de fuente: normal;

Paso 4: Ejecutar la aplicación de contador animado

Después de guardar el código especificado, abra el archivo HTML de su proyecto de contador animado en el navegador con la ayuda del "Servidor en vivo" extensión:

Así es como se ve nuestra aplicación animada en el mostrador JavaScript:

Conclusión

Un mostrador animado se crea en un Aplicación JavaScript Para mostrar el contador numérico en una forma animada a partir de 0 y terminando con el número especificado. Muchos sitios web emplean esta función para que su página web sea más atractiva. Puede utilizar un contador animado para mostrar la cantidad de usuarios registrados, la cantidad de visitantes del sitio web o la cantidad de personas que jugaron un juego en línea. Esta publicación discutió el procedimiento de crear un mostrador animado en JavaScript.