IceBeat

Esta clase forma parte de un proyecto que tengo entre manos, algo sencillo y personal.

Su función es crear un cronometro, el cual lo podemos parar, resetar o volver a iniciar. Se puede usar con cuenta atrás aunque tendrías que crear una clase para disparar cuando llegues a 0. Quiero decir que la clase es muy básica pero muy útil si la extiendes.

var Timer = new Class({

    initialize: function(el) {
        this.element = $(el);
    },

    start: function() {
        if (this.timer) return this;
        this.time = (!this.now) ? $time() : $time() - (this.toSeconds() * 1000);
        this.timer = this.step.periodical(500,this);
    },

    stop: function() {
        if (!this.timer) return this;
        this.timer = $clear(this.timer);
        return this;
    },

    toggle: function() {
        if(this.timer) this.stop();
        else this.start();
        return this;
    },

    reset: function(now) {
        this.time = $time();
        this.now = now ? this.toArray(now*1000) : [0,0,0];
        this.increase();
        return this;
    },

    toSeconds: function() {
        return ((this.now[0] * 3600) + (this.now[1] * 60) + (this.now[2]));
    },

    toArray: function(step) {
        var deltaH = step % 3600000;
        var deltaM = deltaH % 60000;
        return [(step-deltaH) / 3600000, (deltaH - deltaM) / 60000, Math.floor(deltaM/1000)];
    },

    step: function() {
        var step = $time() - this.time;
        this.now = this.toArray(step);
        this.increase();
    },

    increase: function() {
        var display = this.now.map(function(item) {
            item = Math.abs(item);
            if(item==60) return '00';
            return (item < 10) ? '0'+item : item ;
        });
        this.element.setText(display.join(':'));
    }

});

Ejemplo:

<div id="timer">00:00:00</div>    

//Normal
var time = new Timer('timer');
time.start();

//Cambiar tiempo: 01:00:00
time.reset(3600);

//Cuenta atrás
time.reset(-3600);