StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Your script never contacts your server at any time. You are going to need a server side script that outputs the time.</p> <p>Create a PHP file named <code>GetTime.php</code> and place it on your server. It should have the following contents:</p> <p><b>PHP</b></p> <pre><code><?php echo time(); </code></pre> <p>Next, you need to modify your script to get the time from your server script.</p> <p>You don't want to continuously do this because it could cause delays in updating your clock. So, do it on clock initialization, and store an offset between the server and the client. Then apply that offset each time the client date is retrieved in the <code>getTime()</code> function.</p> <p><b>jQuery</b></p> <pre><code> /* * jQuery jclock - Clock plugin - v 0.2.1 * http://plugins.jquery.com/project/jclock * * Copyright (c) 2007-2008 Doug Sparling <http://www.dougsparling.com> * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php */ (function($) { $.fn.jclock = function(options) { var version = '0.2.1'; // options var opts = $.extend({}, $.fn.jclock.defaults, options); return this.each(function() { $this = $(this); $this.timerID = null; $this.running = false; $.fn.jclock.getServerOffset($this); var o = $.meta ? $.extend({}, opts, $this.data()) : opts; $this.timeNotation = o.timeNotation; $this.am_pm = o.am_pm; $this.utc = o.utc; $this.utc_offset = o.utc_offset; $this.css({ fontFamily: o.fontFamily, fontSize: o.fontSize, backgroundColor: o.background, color: o.foreground }); $.fn.jclock.startClock($this); }); }; $.fn.jclock.getServerOffset = function(el) { //Want to make a synchronous call to the server to get the server time. $.ajax({ url: "GetTime.php", async: false, context: el, success: function(result) { var serverDate = new Date(+(result) * 1000); //Convert the seconds to a number, and multiple by 1000 to get milliseconds. var clientDate = new Date(); $this.serverOffset = clientDate - serverDate; //Set the offset between server and client. } }); }; $.fn.jclock.startClock = function(el) { $.fn.jclock.stopClock(el); $.fn.jclock.displayTime(el); }; $.fn.jclock.stopClock = function(el) { if(el.running) { clearTimeout(el.timerID); } el.running = false; }; $.fn.jclock.displayTime = function(el) { var time = $.fn.jclock.getTime(el); el.html(time); el.timerID = setTimeout(function(){$.fn.jclock.displayTime(el)},1000); }; $.fn.jclock.getTime = function(el) { var now = new Date(new Date().getTime() - el.serverOffset); //Apply the server offset. var hours, minutes, seconds; if(el.utc == true) { if(el.utc_offset != 0) { now.setUTCHours(now.getUTCHours()+el.utc_offset); } hours = now.getUTCHours(); minutes = now.getUTCMinutes(); seconds = now.getUTCSeconds(); } else { hours = now.getHours(); minutes = now.getMinutes(); seconds = now.getSeconds(); } var am_pm_text = ''; (hours >= 12) ? am_pm_text = " P.M." : am_pm_text = " A.M."; if (el.timeNotation == '12h') { hours = ((hours > 12) ? hours - 12 : hours); } else { hours = ((hours < 10) ? "0" : "") + hours; } minutes = ((minutes < 10) ? "0" : "") + minutes; seconds = ((seconds < 10) ? "0" : "") + seconds; var timeNow = hours + ":" + minutes + ":" + seconds; if ( (el.timeNotation == '12h') && (el.am_pm == true) ) { timeNow += am_pm_text; } return timeNow; }; // plugin defaults $.fn.jclock.defaults = { timeNotation: '24h', am_pm: false, utc: false, fontFamily: '', fontSize: '', foreground: '', background: '', utc_offset: 0 }; })(jQuery); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload