Live clock using server time

Just something I threw together for something else, thought someone might benefit from it. Displays a live, real time clock value based upon the time of the web server.

Will not work in IE6 or earlier. Tested in IE7/8, FF12, and Chrome 10.

Uses AJaX and does NOT require jQuery.


<div id="serverTime"></div>
<script type="text/javascript">
String.prototype.pad = function(l,s){ // Pad integers with a leading '0'
return (l -= this.length) > 0
? (s = new Array(Math.ceil(l / s.length) + 1).join(s)).substr(0,s.length) + this + s.substr(0, l-s.length)
: this ;
};

// This will not work in IE6 or earlier
function getST(){
var xhr = new XMLHttpRequest();
xhr.open('HEAD',window.location.href.toString(),false);
xhr.setRequestHeader("Content-Type","text/html");
xhr.send('');
var date = xhr.getResponseHeader("Date");
date = new Date(date);
var nowDate = new Date(date.toLocaleString());
var thisDay = nowDate.getDay();
switch(thisDay){
case 0: thisDay = "Sunday"; break; case 1: thisDay = "Monday"; break; case 2: thisDay = "Tuesday"; break;
case 3: thisDay = "Wednesday"; break; case 4: thisDay = "Thursday"; break; case 5: thisDay = "Friday"; break;
case 6: thisDay = "Saturday"; break;
}
var thisMonth = nowDate.getMonth();
switch(thisMonth){
case 0: thisMonth = "January"; break; case 1: thisMonth = "February"; break; case 2: thisMonth = "March"; break;
case 3: thisMonth = "April"; break; case 4: thisMonth = "May"; break; case 5: thisMonth = "June"; break;
case 6: thisMonth = "July"; break; case 7: thisMonth = "August"; break; case 8: thisMonth = "September"; break;
case 9: thisMonth = "October"; break; case 10: thisMonth = "November"; break; case 11: thisMonth ="December"; break;
}
var thisDate = nowDate.getDate().toString().pad(2,"0");
var thisYear = nowDate.getFullYear().toString();
var thisHour = nowDate.getHours().toString().pad(2,"0");
var thisMinute = nowDate.getMinutes().toString().pad(2,"0");
var thisSecond = nowDate.getSeconds().toString().pad(2,"0");
document.getElementById("serverTime").innerHTML = thisDay+", "+thisMonth+" "+thisDate+", "+thisYear+" "+thisHour+":"+thisMinute+":"+thisSecond;
} var serverTimeDisplay = setInterval("getST()",1000);
</script>

Guess I should have provided a bit more info.

Gets server time in GMT, converts to local time (.toLocaleString()).

May not work if server does not respond well to HEAD requests.

I did it this way because while FF and IE will take the raw Date object and display it identically, Chrome adds info to the end; this will be uniform across all three.

cool.

But I was getting NaN for the nowDate variable in IE and "invalid date object" in FF. I changed that line to:
var nowDate = new Date(date.toString());
(toLocaleString() is notoriously hokey in its application across regions)
and it works fine in all three browsers you metioned :thumbsup:

toUTCString() seems to be problem-free as well.

Well, I wanted to display the local time based upon server time. But I suppose you could get the servers timezone and offset from that for actual server time. But getTimezoneOffset() returns minutes, and does not indicate + or -. And not everyone understands GMT/UTC.

for comparison's sake I ran this code:

var d = new Date();
document.getElementById("time").innerHTML="toString(): "+d.toString()+"<br>toLocaleString(): "+d.toLocaleString()+"<br>toUTCString(): "+d.toUTCString();

var nowLDate = new Date(d.toLocaleString());
var thisLocaleDay = nowLDate.getDay();
document.getElementById("time").innerHTML+="<br>toLocaleString().getDay: "+thisLocaleDay;
var nowSDate = new Date(d.toString());
var thisSDay = nowSDate.getDay();
document.getElementById("time").innerHTML+="<br>toString().getDay: "+thisSDay;


in the three browsers. these are the outputs:

Chrome 21:
tostring(): Tue Sep 11 2012 08:28:33 GMT-0600 (Hora est. de América Central)
toLocaleString(): Tue Sep 11 2012 08:28:33 GMT-0600 (Hora est. de América Central)
toUTCString(): Tue, 11 Sep 2012 14:28:33 GMT
toLocaleString().getDay: 2
toString().getDay: 2

IE 8:
tostring(): Tue Sep 11 08:29:01 CST 2012
toLocaleString(): Martes, 11 de Septiembre de 2012 08:29:01 a.m.
toUTCString(): Tue, 11 Sep 2012 14:29:01 UTC
toLocaleString().getDay: NaN
toString().getDay: 2

FF 15:
tostring(): Tue Sep 11 2012 08:29:19 GMT-0600
toLocaleString(): Martes, 11 de Septiembre de 2012 08:29:19 a.m.
toUTCString(): Tue, 11 Sep 2012 14:29:19 GMT
toLocaleString().getDay: NaN
toString().getDay: 2

I don't know that much about the date object, but I guess that the problem is that IE and FF output the LocaleString correctly (in Spanish, because I am in Central America) but then can't get the day from that string. Like I say, I think it's a cool piece of code, but you have to be careful with manipulating LocaleString unless you know that all your users are in the same locale.