...

View Full Version : Live clock using server time



WolfShade
09-10-2012, 08:01 PM
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>

WolfShade
09-10-2012, 08:11 PM
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.

xelawho
09-10-2012, 11:23 PM
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.

WolfShade
09-11-2012, 02:27 PM
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.

xelawho
09-11-2012, 03:28 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum