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 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');
}
}
});