What your script does is poll a script on your server at inc/clock.php and replace your #clock_time element's contents with the output from the script (roughly) every second.
This should work, provided you have a element with id clock_element and a script at yoursite.tld/inc/clock.php
However, I disagree to constantly poll the server for it's current time. It should suffice to sync time only once to your webserver. Beside some minor differences this should keep your clocks synced well enough for a good while. If your webapp will run more than a couple of hours or days you should periodicly resync your clock (once a day or a week should do).
Use a Date object to keep track of the servertime on your client. Simply create a Date object from the output of clock.php (a valid date output as prerequisite) and update your clock_element periodicly (like every second) according to the time delta from when you synced your clock with the remote server.
Here some rough code, not tested, propably some syntax errors, but briefly shows what you should do:
function setupServerClock( clock_element, remote_time_url, remote_update_interval, local_update_interval ) {
var w = window;
// client time on resync
var ct = new Date();
// server time on resync
var st = new Date();
// setup resync
w.setInterval( function() {
jQuery.ajax( {
url: remote_time_url,
success: function (data) {
ct = new Date();
st = new Date(data);
}
});
}, remote_update_interval);
// setup local clock display
w.setInterval( function() {
// the time passed on our local machine since the last resync
var delta = new Date() - ct;
// we assume the same time passed at the server
// (yeah, I know, spacetime might not be the same at the servers
// place and off the shelve clocks are pretty inaccurate)
var clock = st - 0 + delta; // - 0 to convert to microsecond timestamp
jQuery(clock_element).html(new Date(clock));
}, local_update_interval);
}
Call it with something like:
setupServerClock( jQuery('#clock_element'), 'inc/clock.php', 1000 * 60 * 60, 1000 );
This will setup the clock to be written to #clock_element, using the value returned from yourdomain.tld/inc/clock.php, resync the clock every hour and update the local representation of the clock every second.
Oh and if that periodical resync indeed brings up "jumps" in the clock you could think about simply giving the user feedback, that his clock was updated, eg like this
w.setInterval( function() {
jQuery(clock_element).html('resyncing clock...');
jQuery.ajax( {
url: remote_time_url,
success: function (data) {
ct = new Date();
st = new Date(data);
}
});
}, remote_update_interval);