Artículos

Un plugin de contador para jQuery

Un contador de jQuery basado en query-countdown, con opciones adicionales como la posibilidad de contar de forma ascendente.

Captura de pantalla de jQuery.counter
Captura de pantalla de jQuery.counter
  • Formato: completamente personalizable mediante un atributo del elemento o una opción de inicialización
  • Dirección: ascendente o descendente
  • Detención: completamente personalizable mediante un atributo del elemento o una opción de inicialización
  • Apariencia: completamente personalizable mediante CSS3
  • Licencia: MIT

Opciones

Puedes configurar las opciones mediante el atributo data-<name>="value" o en el objeto de opciones al inicializar el contador: $(element).counter({name: value, ...})

  • direction: up|down Dirección del contador – valor predeterminado: down
  • format: string Define la cantidad de partes y el número máximo para cada una – valor predeterminado: 23:59:59
  • interval: number Define el incremento o decremento en milisegundos – valor predeterminado: 1000
  • stop: string Define el número en el que se detiene el contador – valor predeterminado: el número máximo permitido por el formato.

Eventos

  • counterStop: se dispara cuando el contador alcanza el número de detención
$('.counter').on('counterStop', function() {
    //code
});

Uso

Cuenta regresiva de 10 segundos

<span class="counter">0:10</span>
<script type="text/javascript">
  $('.counter').counter();
</script>

Cuenta de 120 segundos

<span class="counter" data-direction="up" data-format="120">0</span>
<script type="text/javascript">
  $('.counter').counter();
</script>

Contador binario que se detiene en 001000000 (observa los espacios entre los dígitos binarios)

<span class="counter" data-direction="up" data-format="1 1 1 1 1 1 1 1" data-stop="">0 0 1 0 0 0 0 0</span>
<script type="text/javascript">
  $('.counter').counter();
</script>

Descarga

Puedes descargar jquery-counter desde Github.

“Un plugin de contador para jQuery” de Pablo Ricco está bajo la licencia CC BY SA. Los ejemplos de código fuente están bajo la licencia MIT.

Foto de portada de Loic Djim.

Clasificado en Código abierto.

Lecturas relacionadas