Contador con JQuery

Buenas lechug@s! Siento el retraso del artículo, en verano ya se sabe :P. Hoy traemos un sencillo código para realizar un contador con JQuery.

Con este contador podreis dar un efecto dinámico a vuestra web, seguro que habeis visto muchas webs que tienen puesto el número de proyectos que han realizado, o cuantos clientes tienen, y lo hacen con un contador que va incrementandose.. pues es exactamente eso lo que vamos a enseñaros a hacer hoy.

Se que hay librerias para hacer lo mismo, pero hemos decidido hacerlo nosotros, manualmente, lo importante es aprender, o no?

En primer lugar tenemos el sitio en html, donde queremos que aparezca nuestro contador:

<p id="contador1" data-from="0" data-to="10000" class="contador"></p>
<p id="contador2" data-from="0" data-to="20000" class="contador"></p>

Como veis es un <p> vacio con id y class llamada contador y con dos valores data (data-from y data-to). El atributo “data-from” va a determinar el número desde el que iniciara nuestra cuenta, en cambio el atriburo “data-to” determina hasta que número ha de llegar la cuenta.

Vamos a crear nuestra función counter para poderla llamar desde distintos contadores si lo deseamos:

<script type="text/javascript">
 function counter(elem) {
 
  var id = setInterval(frame, 10);
  function frame() {
    if (elem.data('from') == elem.data('to')) {
      clearInterval(id);
    } else {
      
      contador=elem.data('from')+1;
      elem.data('from',contador);
      elem.html(elem.data('from'));
    }
  }
}
</script>

Empezamos por el principio. Declaramos la función counter al que le pasamos todo el elemento (luego os enseño a pasarselo). Definimos la variable id a la que le añadimos la función setInterval, que llamará a la función “frame” cada periodo de tiempo que indiquemos en milisegundos (en este caso 10).

La función frame lo que hace es tomar el atriburo “from” que hemos declarado en el html y comparar si es igual a el “to” (nuestro punto final). Si es igual, libera el atributo id y deja de llamar a frame. Si es distinto sumamos uno al from, tomamos el valor, y modificamos el elemento para que tenga el mismo valor que from. Con esto conseguiremos que se vaya incrementando desde el valor “from” (0 en este caso) a el “to” (10000 y 20000 en este caso), observando la transición y viendo así el efecto.

Sólo nos quedaría llamar a la función counter del siguiente modo:

<script type="text/javascript">

$( document ).ready(function() {
      $('.contador').each(function(i) {
           
                counter($(this));    
            
        });
});


</script>

El siguiente código se ejecutaría cuando se cargue la página y lanzaría la función para cada elemento cuya clase sea “contador”, con lo que cada una cogería su inicio y su final y funcionaría.

Las posibilidades son infinitas, podemos pasar también la velocidad de una u otra por el atributo o incluso que empiece a contar cuando se haga scroll hasta la altura de la pantalla, o que en vez de un contador, usemos imagenes para hacer un animación..

 

Espero que os haya sido de ayuda, un saludo y nos hablamos por los comentarios!

Deja un comentario