JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<div id="output"></div>

CSS

#output{color:#999;font:normal 48px/1.5em 'Courier New', Courier, monospace}
#output span{padding:0 0.1em}

JavaScript

YUI().use('node', function (Y) {

    var n = Y.one('#output');
    
    // converts milliseconds to '3:45' or if hours > 0, '2:01:23'
    var getTimeFromMillis = function( ms ) {
        var date    = new Date( ms ),
            tz_mins = date.getTimezoneOffset(),
            seconds = ~~( ( ms / 1000 ) % 60 ),
            minutes = ~~( ( ms / ( 1000 * 60 ) ) % 60 ),
            hours   = ~~( ( ms / ( 1000 * 60 * 60 ) ) % 24 ) - (tz_mins / 60),
            twoDigit = function ( n ) {
                return n < 10 ? '0' + n : n;
            },
            seconds = '<span>:</span>' + twoDigit( seconds );

        return hours > 0 ? 
            hours + '<span>:</span>' + twoDigit( minutes ) + seconds : 
            minutes + seconds;

    };
           
    setInterval(function () {
    
        n.set('innerHTML', getTimeFromMillis(new Date));

    }, 0);    
    
});