Clock Appender

by joplomacedo

HTML

<div id="clock">00:00</div>
<button id="start">Start Clock!</button>

JavaScript

(function($) {
    var addClockTo = (function() {

        var startClock = function startClock() {
            if (this.clock_timeout) {
                clearTimeout(this.clock_timeout);
                this.time = 0;
            }
            clock(this);
        },

            stopClock = function stopClock() {
                clearTimeout(this.clock_timeout);
            },

            clock = function clock(self) {
                self.secs = self.time % 60;
                self.minutes = (self.time - self.secs) / 60;

                /*prepend 0 if number has only 1 digit*/
                if (self.secs < 10) self.secs = "0" + self.secs;
                if (self.minutes < 10) self.minutes = "0" + self.minutes;

                self.node.text(self.minutes + ":" + self.secs);

                self.time++;
                self.clock_timeout = setTimeout(function () {clock(self);}, 1000);
            };

        return function(node) {
            var c = {
                node: node,
                time: 0,
                secs: 0,
                minutes: 0,
                clock_timeout: undefined
            };

            node.startClock = startClock.bind(c);
            node.stopClock = stopClock.bind(c);
        };
    })();





    $start = $('#start');
    $clock = $('#clock');
    
    addClockTo($clock);

    $start.toggle($clock.startClock, $clock.stopClock);


    
    
    
    
    
    
    
})(jQuery);