Time seconds display update within different periods

HTML

<button onclick="window.onStart();">Start</button>
<button onclick="window.onStop();">Stop</button>
<pre id="console"></pre>

JavaScript

(function () {
    // Try 200, 500, 600, 700 to see the difference:
    var period = 500;
    var t;
    var timer;
    function log(message) {
        var con = document.getElementById('console');
        con.innerHTML = message + "\n" + con.innerHTML;
    }
    window.onStart = function () {
        log('real period | seconds.milliseconds');
        window.clearInterval(timer);
        t = +new Date();
        timer = window.setInterval(function () {
            var t2 = +new Date();
            var d2 = new Date(t2);
            log((t2 - t) + ' | ' + d2.getSeconds() + '.' + d2.getMilliseconds());
            t = t2;
        }, period);
    };
    window.onStop = function () {
        log('stopped');
        window.clearInterval(timer);
        timer = null;
        document.getElementById('status').innerHTML = 'idle';
    };
    log('press Start');
}());