Server Time

This site is best viewed in a modern browser with JavaScript enabled.

tonystark

Hello, I am quite new here so I am not sure if I am on the right section.
I would like to place a server time clock inside a wordpress widget.
Now I came up with this code, its all included with the style and I would like to keep this style but this clock doesn't show the server time but the client time.

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML = h+":"+m+":"+s;
    var t = setTimeout(function(){startTime()},500);
}

function checkTime(i) {
    if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>

<body onload="startTime()">

<div id="txt" style="background-color:transparent; font-family: 'courier', Helvetica, Arial, sans-serif;  font-size: 20pt; color: #FFF;"></div>

</body>
</html>

Someone can help me with this code to show the server time rather than client time?

Thank you in advance.

root

Get the server time in PHP and have it written in to a time reference in a JavaScript.

I also see that you are using a method of gathering time data that is really out of the ark.

Write in the current server time with PHP

<?php
date_default_timezone_set('America/Los_Angeles');
$rfc = date("r");
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Server Time</title>
<script>
timeSrv = new Date( "<?php echo $rfc;?>" ).getTime();
...
...
stringTime = new Date(timeSrv ).toUTCString().slice(17,25); // returns 00:00:00 format time

...
...
</script>
</head>

You will need to sub the local timezone of your server here date_default_timezone_set('America/Los_Angeles');

What you then have is a date object returned by the server, set on the clients machine as milliseconds

the stringTime will be a string time representation already formatted

You will need to have other time functions if you want to have the time of this object advanced, because this is in milliseconds, you can incorporate other functions that return milliseconds so you can calculate what you need.

The JavaScript Date() object understands many different time formats, string dates such as RFC dats and ISO dates and times, milliseconds and d/m/y hs formats.

Avoid using setTimeout callbacks, they take time to set up and consume time, use the setInterval, it only needs to be set once and it will keep on calling the function until page is shut down or navigated away from.

xelawho

a js-only solution, in case that's required...

<body>

<div id="txt" style="background-color:transparent; font-family: 'courier', Helvetica, Arial, sans-serif;  font-size: 20pt;"></div>
<script>
(function (){
	var st=getDate();
	var today = new Date(st);

function getDate(){	
	var xmlHttp = new XMLHttpRequest();
	xmlHttp.open('HEAD',window.location.href.toString(),false);
	xmlHttp.setRequestHeader("Content-Type", "text/html");
	xmlHttp.send('');
	return xmlHttp.getResponseHeader("Date");
}

function startTime() {
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML = h+":"+m+":"+s;
	today.setSeconds(today.getSeconds() + 1);
}

function checkTime(i) {
    if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

startTime();
setInterval(startTime,1000);
})();
</script>
</body>