Live Server Clock

**hirak1984** · Feb 12 '08, 03:53 PM

Originally posted by TheServant

...<form name="live_time _form">
Server Time: <INPUT TYPE="text" name="live_time _clock" size="15">
</form>...

instead try using

a span or a div with the same name (="live_time_cl ock")
it should work

**acoder** · Feb 13 '08, 08:07 AM

Originally posted by TheServant

So I want to replace the document.live_t ime_form.live_t ime_clock.value line, and also my <form> to some simple <p> or something?

Replace the form with a div/span/p/other element with id "live_time_cloc k" and then replace line4 with:
[CODE=javascript]document.getEle mentById("live_ time_clock").in nerHTML = server_hours+": "+server_mins+" :"+server_se cs;[/code]

**acoder** · Feb 13 '08, 08:08 AM

Originally posted by hirak1984

instead try using

a span or a div with the same name (="live_time_cl ock")
it should work

You're along the right lines, but adiv/span doesn't have a value attribute, so you'd need to use innerHTML or the DOM methods.

**TheServant** · Feb 13 '08, 12:15 PM

Sounds good, but I think I'm missing something:

Added your document.getEle mentById suggestion, and that makes sense.
I changed the <form> section to:
[HTML]<span id="line_time_c lock"> </span>[/HTML], which didn't work, and then tried without the   along with <p> and <div>. All of these produce no output? What should go between <span> and </span>? I think that's where the problem is?

Also, I want to display the server time rather than the user's PC time, so I just had this in the code instead of the plain js date() function:
[PHP]var server_time = new Date("<?php $time = date('F d, Y H:i:s'); echo($time); ?>");[/PHP]
Does this look right?

**acoder** · Feb 13 '08, 12:21 PM

"line_time_cloc k" should be "live_time_cloc k".

**TheServant** · Feb 13 '08, 12:35 PM

lol, argh, typo! It's late, and I should be going to bed! But I really wana get this working! It still is not giving any out put with that:

[HTML]<script type="text/javascript"></script>[/HTML]

[HTML]Server Time: <span id="live_time_c lock"> </span>[/HTML]

**acoder** · Feb 13 '08, 01:03 PM

Chang line 14 in the JavaScript to:[code=javascript]document.getEle mentById("live_ time_clock").in nerHTML=server_ hours+":"+serve r_mins+":"+serv er_secs;[/code]

**TheServant** · Feb 13 '08, 10:11 PM

Originally posted by acoder

Chang line 14 in the JavaScript to:[code=javascript]document.getEle mentById("live_ time_clock").in nerHTML=server_ hours+":"+serve r_mins+":"+serv er_secs;[/code]

Damn it, that was the old code. I have already changed that, but changed it back to test it. So line 14 changed still does not solve the problem, can anyone see anything else?

**markrawlingson** · Feb 14 '08, 12:11 AM

What exactly is the problem with it at this point? If it's throwing an error please let us know what it is. If it's not throwing an error, but the time is just not moving.. it's probably because of this.

[code=php]
[color=#000000]var[/color] server_time = [color=#000000]new[/color] [color=#000066]Date[/color][color=#66cc66]([/color][color=#ff0000]"<?php $time = date('F d, Y H:i:s'); echo($time); ?>"[/color][color=#66cc66])[/color];
[/code]

That value won't get updated unless you refresh the page, and that defeats the purpose.

and by the way, you don't need to put anything between the <span></span> tags, the innerHTML section of the script does that for you.

I'll whip up something for you tonight.

Sincerely,
Mark

Originally posted by TheServant

Damn it, that was the old code. I have already changed that, but changed it back to test it. So line 14 changed still does not solve the problem, can anyone see anything else?

**TheServant** · Feb 14 '08, 01:17 AM

Thanks for all your help guys. I have a code that works, I haven't put it up yet, but now my only problem is the Javascript date() function...

So basically I want my server time, not the client time. I have tried a lot of different formats, but I can't get it, nor find exactly what I need.
I have:

Code:

new Date("<?php $time = date('F d, Y H:i:s'); echo($time); ?>")

Which gives something like:

Code:

new Date(February 14, 2008 11:15:45)

But this doesn't seem to do anything, which means that my php input to the javascript function Date() is wrong?

**tswaters** · Feb 14 '08, 01:29 AM

Originally posted by TheServant

my php input to the javascript function Date() is wrong?

Correct! Valid constructors for date are:

[code=javascript]
new Date(); // right now
new Date(millisecon ds) // # of milliseconds since 01/01/70 00:00:00
new Date(dateString ) // a string that represents the date in a format that is recognized by the Date.parse method
new Date(yr_num, mo_num, day_num [, hr_num, min_num, sec_num, ms_num])
[/code]

You can probably put what you have in quotes to make it work:

Code:

new Date("February 14, 2008 11:15:45")

But if that fails -- and believe you me, the parse function fails miserably, try getting it in the format of:

Code:

new Date( "2008", "01", "14", "11", "15", "45")

.... oh, and note the month 0 = jan.

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"> </span>

[/html]

**TheServant** · Feb 14 '08, 01:46 AM

Thanks.
So u reckon I should change from innerHTML? Haven't used the child function, what's the advantage? I changed my php format but it's still not working.
This is what the function looks like once PHP has done it's thing:

Code:

new Date("2008, 02, 14,  11, 40, 54");

(I do not have milli-seconds as that is only available on php 5.25 or something which is above my version).

The output string on the page is "NaN:NaN:NaN"?? ?

PS - without the php, it works fine, so it's only my php now!

**tswaters** · Feb 14 '08, 02:16 AM

Originally posted by TheServant

So u reckon I should change from innerHTML? Haven't used the child function, what's the advantage?

I do reckon... not sure if there's any advantage. Actually when dealing with huge amounts of data, innerHTML is faster.... The only real advantage comes when you need to reuse the elements from around different javascript functions -- you just need to declare it once and manipulate, instead of doing a 'getElementById (_id).innerHTML = "" to change..... oh, that and you avoid using a proprietary html property.... and when people look at your code they'll be like "wooow this guy really knows his stuff"

Originally posted by TheServant

I changed my php format but it's still not working.
This is what the function looks like once PHP has done it's thing:

Code:

new Date("2008, 02, 14,  11, 40, 54");

(I do not have milli-seconds as that is only available on php 5.25 or something which is above my version).

Getting closer.... analyze this:

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

Both return the same thing.... I would recommend the first because you never know whether the parse function will crap out on ... oh i don't know .. single-digit minutes or something. it's super-shoddy in my experience.

**markrawlingson** · Feb 14 '08, 02:51 AM

If you want to get the SERVER time rather than the CLIENT time then you don't need to use the date() call in javascript at all. In fact, if you do it the way you're doing it right now you'll only ever get the same time, it won't count. Why you ask? Because when the page loads, your PHP date function is echoing the current server time to your javascript date function - that "current time" is the time when the page loads. That essentially means that unless you refresh the page so the PHP code can re-execute (and therefore echo the new current server time to your javascript date() function), your javascript will ALWAYS have the same date, thus - it won't count.

If you want to grab the server time you'll need to use AJAX to call a PHP script in the background which simply has the date function. This way, you are constantly calling on the server to hand you the new time.

Name the .php page 'getTime.php' (or if you name it something different you'll have to change the references to it in the js.) The php file itself is even simpler than you already have.

[code=php]
<?php echo date('F d, Y H:i:s') ?>
[/code]

(that's it.)

and the actual page...

[code=html]
<html>
<head>
<script language="javas cript">

</script>
</head>
<body onLoad="startcl ock();">
<div id="oClock"></div>
</body>
</html>
[/code]

Sincerely,
Mark

Live Server Clock

Live Server Clock

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment