A javascript clock [KO]

A simple digital javascript clock made with KnockoutJS

by jjperezaguinaga

HTML

<div>
    <em data-bind="text:hour">00</em>:<em data-bind="text:minute">00</em>:<em data-bind="text:second">00</em>
    <br/>
    <button data-bind="click: start, disable: hasStarted()">Start</button>
    <button data-bind="click: pause, disable: !hasStarted()">Pause</button>
    <button data-bind="click: reset">Reset</button>
    <button data-bind="click: increaseMinute">+ Minute</button>
    <button data-bind="click: increaseHour">+ Hour</button>
</div>

JavaScript

function Clock() {
    var self = this;
    
    var formatNumber = function(n) {
        return (n).toString().length == 1 ? "0"+n : n;
    }
    
    self.hour = ko.observable("00");
    self.minute = ko.observable("00");
    self.second = ko.observable("00");
    
    self.hasStarted = ko.observable(false);
    
    self.increase = function() {
        var second = +self.second();
        var minute = +self.minute();
        var hour = +self.hour();
        self.second( formatNumber(++second % 60) );
        self.minute( formatNumber((parseInt(second / 60) + minute) % 60 ));
        self.hour( formatNumber((parseInt( (parseInt(second / 60) + minute) / 60 ) + hour) % 24 ));
    }
    
    self.increaseMinute = function() {
        var i = 60;
        while(i--) self.increase();
    }
    
    self.increaseHour = function() {
        var i = 60;
        while(i--) self.increaseMinute();
    }
    
    self.start = function() {
       self.hasStarted(true);
       self.timeout = setTimeout(function(){self.increase(); self.start();}, 100);        
    }
    
    self.reset = function() {
        self.hour("00");
        self.minute("00");
        self.second("00");
    }
    
    self.pause = function() {
        if(self.timeout && self.hasStarted()) { 
            clearTimeout(self.timeout)
            self.hasStarted(false);
        }        
    }
    
    
}

ko.applyBindings(new Clock());