Live Server Clock

[TheServant]

[code=javascript]
alert( new Date( "2008", "01", "14", "11", "15", "45") )
alert( new Date("February 14, 2008 11:15:45") )
[/code]

So I need something like:
[HTML]new Date("<?php
$y=date('Y');
$m=date('m') - 1;
$d=date('d');
$H=date('H');
$i=date('i');
$s=date('s');
echo($y.'/"'.$m.'/"'.$d.'/"'.$H.'/"'.$i.'/"'.$s);
?>"); [/HTML]

*EDIT* Awsome Mark, I will give both of these a go and let you all know how it turns out when I get home (~5hrs). One question Mark, if you are constantly asking for an updated server time, will this not take up a whole lotta memory or something calling from the server every second?

[markrawlingson]

It certainly *can* - but you have to look at what you're asking the server to do, which in this case is just asking it to echo 1 line of code - the time - not exactly what you'd call a resource hog. The only way you'd have any problems is if you had a few thousands users logged on at the same time watching this thing count, in that case you're sending x thousand server requests a second :P They're small server requests but you get my point.. it can add up.

Is it the most efficient way? Nope! But it's the simplest and most straight forward way. If you want the most effecient, you'd have to basically return the server time with PHP to a javascript variable once, and then write a fairly complicated set of javascript functions to count the seconds until they reach 60, then set that variable back to 0 and increment a minute variable by 1. Then when the minute variable = 60, incremement the hour, and when the hour variable reaches 24 , switch the day, then you'd have to determine the month to keep track of when the month should switch (after day variable = 28, 30, or 31?) - and then you'd have to track the years, and then you'd even have to track leap years.

Essentially you'd have to write a whole date and time handler and base it's initial date off of the server time. This is much easier i think you can agree lol

Sincerely,
Mark

So I need something like:
[HTML]new Date("<?php
$y=date('Y');
$m=date('m') - 1;
$d=date('d');
$H=date('H');
$i=date('i');
$s=date('s');
echo($y.'/"'.$m.'/"'.$d.'/"'.$H.'/"'.$i.'/"'.$s);
?>"); [/HTML]

*EDIT* Awsome Mark, I will give both of these a go and let you all know how it turns out when I get home (~5hrs). One question Mark, if you are constantly asking for an updated server time, will this not take up a whole lotta memory or something calling from the server every second?

[TheServant]

I see your point. Well seeing as I only want the time (not date), I might play around with javascript to see what i can do. I need the practice as I have hardly used javascript besides altering already made scripts.

Oh and does anyone know what the NaN:NaN:NaN means? It is my current output when I tell it to write: Hours:Mins:Secs

[tswaters]

Oh and does anyone know what the NaN:NaN:NaN means? It is my current output when I tell it to write: Hours:Mins:Secs

NaN means: Not a Number -- generally raised if you divide by zero or square route of -1, things like that.... in this case, if you forgot () on the function calls, that would do it.... or if the date is invalid, that woluld do it.... try and alert( server_time ) -- if it returns "Invalid Date", there's your problem.

Mark raises some very good points... but, it's really not all that complicated to use the build in javascript date object -- granted, you do need to give it a constructor which includes yyyy/mm/dd, which you may not be interested in, buuuut, you can increment the seconds with a single line of code... .try this out -- replace Date constructor with your own brand:

[code=javascript]var timeclock, server_time;

function init() {
timeclock = document.getEle mentById('live_ time_clock');
if( timeclock.child Nodes.length == 0 ) timeclock.appen dChild( document.create TextNode("&nbsp ;") );
server_time = new Date("2005", "1", "12", "12", "50", "45" )
incrementClock( );
}


function incrementClock( ) {
server_time.set Seconds( server_time.get Seconds() + 1 );
timeclock.repla ceChild( document.create TextNode( (server_time.ge tHours() < 10 ? "0" + server_time.get Hours() : server_time.get Hours()) + ":" + (server_time.ge tMinutes() < 10 ? "0" + server_time.get Minutes() : server_time.get Minutes()) + ":" + (server_time.ge tSeconds() < 10 ? "0" + server_time.get Seconds() : server_time.get Seconds()) ), timeclock.first Child );
setTimeout( "incrementClock ();", 1000);
}
[/code]

[html]
<body onLoad="init(); ">
<div id="live_time_c lock"></div>
</body>
[/html]
of course it's not perfect -- the code, in theory, takes some time to run so after each 1000 milliseconds, your time is behind by however long it takes to increment the clock & pop it to the screen.... after a while of idling on the page, it may run itself off..... the up-side to the client-side incremntation is you're not going back to the server every second to grab a few bytes of data.

also, may want to write a "padZero" function -- incredibly handy in the long run for those pesky leading zeros.

[acoder]

On a side note - everyone is recommending innerHTML?!? What's wrong with the world! You can use dom manipulation and not endorse the evil innerHTML tag :
[code=javascript]
var e = document.getEle mentById('live_ time_clock');
e.replaceChild( document.create TextNode( server_hours+": "+server_mins+" :"+server_se cs ), e.firstChild )
[/code][html]
<span id="live_time_c lock">&nbsp;</span>
<!-- note the &nbsp; -- required for "firstChild " on first run -->
[/html]

True, innerHTML is non-standard, but it's supported by practically all browsers. It's fast, quick and easy, though there's nothing wrong with using the DOM methods.

[acoder]

If I'm following correctly, you want to display the clock and update every few milliseconds/every second. How about using PHP to generate JavaScript with the date/time, e.g.
[php]echo "var hour = ".$hour.";" ;
// and so on...[/php] and then use the JavaScript Date() object's set*** methods to set the date/time. Then, use tswaters' incrementClock( ) function to update the time. If you want accuracy, every minute or so, you could make an Ajax request to update from the server again.

[TheServant]

It works! tswaters' code with a few tweeks like acoder suggested and I have it! tswater, you should include this on you're site or something, I am sure a lot of people would like code like this!

One question though. I have the file as a .php even though it's 90% js. Is there a way to include php in a .js file?

[acoder]

One question though. I have the file as a .php even though it's 90% js. Is there a way to include php in a .js file?

No, that's not possible. JavaScript is client-side and PHP is server-side. Why would it be a problem if it's 90% JavaScript? The browser sees HTML/JavaScript anyway.

[TheServant]

No, that's not possible. JavaScript is client-side and PHP is server-side. Why would it be a problem if it's 90% JavaScript? The browser sees HTML/JavaScript anyway.

Just looks a bit messy, but all good! acoder, tswaters, markrawlingson and hirak1984, you all rock! Thanks for you help, really appreciate it! This was one of those things which I really wanted to do but simply didn't know enough, so thanks again.

This can be closed.

[acoder]

You're welcome. Glad it's all working.