oct 5 2009

Cuenta atrás/Countdown para mootools

tatai

Es posible que en la pasada Navarparty 7 participases en el concurso Date El Bit y te encontraras con que este año la primera fase de las preguntas se realizaba pregunta por pregunta y había una cuenta atrás para cada una de ellas.

Pantalla de ejemplo de Date El Bit de la Navarparty 7

Pantalla de ejemplo para Date El Bit de la Navarparty 7

Pues bien, para poder hacerla realicé una pequeña clase en javascript para Mootools que me permitiera poder visualizar la cuenta atrás que se puede ver en la imagen. Como estuve buscando por internet y no encontré nada que me gustase, me lancé a hacerlo, no podían ser muchas líneas.

Y así ha sido. Con tan sólo 98 líneas (incluídos comentarios en inglés), tengo el gusto de presentar la clase Countdown.

Esta clase tiene como objetivo realizar la cuenta atrás visualmente actualizando un elemento DOM que se le indique.

El ejemplo de utilización más sencillo es este, que nos crea una cuenta atrás de 10 a 0 en pasos de hasta 100 milisegundos que actualiza en el elemento con id=”counter”:

new Countdown($('counter')).start();

Podemos completarlo un poco más con el siguiente ejemplo:

new Countdown($('counter'), {
  'decimals' : '3', // para hacer que parezca un tiempo de la fórmula 1 :p
  'onComplete' : function() {alert('finalizado!');}, // muestra un alert cuando acaba la cuenta atrás
  'onStep' : function(target, show) {
    // Si el contador está por debajo de 5, poner en rojo, si no, en negro
    if(show < 5) {
      target.setStyle('color', '#f00');
    }
    else {
      target.setStyle('color', '#000');
    }
  }
});

feb 27 2009

Cuenta atrás

tatai

Este enlace me lo pasó alguien, pero no acierto a recordar ahora quién… se trata de una cuentra atrás vía web bastante curiosa. Se llama E.gg timer.

Curiosa e interesante en cuanto al funcionamiento ya que mediante la propia dirección le indicaremos cuánto tiempo (en inglés) queremos para la cuenta atrás. Una vez decidido, el interfaz es muy sencillo, hecho en flash y nos avisará cuando termine con un sonido de despertador típico.

Por ejemplo, si queremos una cuenta atrás de:

Permite también años! La verdad es que no creo que llegue a usarlos, pero sí que alguna vez puede venir bien para alguna cuenta atrás de minutos.