JSFiddle - React, Tailwind, and code Playground

by speakman

HTML

<p>
    Current time: <span id="ct">loading...</span>
</p>

JavaScript

var offset = 0;

function calcOffset() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("HEAD", window.location.href, false);
    xmlhttp.send();

    var dateStr = xmlhttp.getResponseHeader('Date');
    var serverTimeMillisGMT = Date.parse(new Date(Date.parse(dateStr)).toUTCString());
    var localMillisUTC = Date.parse(new Date().toUTCString());

    offset = serverTimeMillisGMT -  localMillisUTC;
}

function getServerTime() {
    var date = new Date();

    date.setTime(date.getTime() + offset);

    return date;
}

function pad(number) { if ( number < 10 ) { return "0" + number; } return number; }

function updateCurrentTime() {
    var serverTime = getServerTime(),
        ctElement = document.getElementById('ct'),
        dateString = serverTime.getFullYear() + "-" +
                     pad(serverTime.getMonth()+1) + "-" +
                     pad(serverTime.getDate()),
        timeString = pad(serverTime.getHours()) + ":" +
                     pad(serverTime.getMinutes()) + ":" +
                     pad(serverTime.getSeconds());

    ctElement.innerHTML = dateString + " " + timeString;

    // Make sure the time is updated exactly on second laps
    var timeToNextSecondLap = 1000 - serverTime.getMilliseconds();
    setTimeout(updateCurrentTime, timeToNextSecondLap);
}

// Run only once
calcOffset();
updateCurrentTime();