Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #22215

Re: OT: Displaying current time on a website

Show all headers | View raw

OK, a couple of corrections needed to my clock.js below...

In article <l78jc8$o49$2@softins.softins.co.uk>,
Tony Mountifield <tony@mountifield.org> wrote:
> In article <l78evn$7jc$1@news.albasani.net>,
> Stefan Weiss  <krewecherl@gmail.com> wrote:
> > On 2013-11-27 22:15, Rhino wrote:
> > > On 2013-11-27 2:41 PM, Christoph Michael Becker wrote:
> > >> In your case I would emit the current time with SSI, and update the time
> > >> with browser side scripting -- if that is disabled or not available at
> > >> all, the visitor sees the time of the request, at least.  However, both
> > >> times may be considerably different due to timezone differences.
> > >>
> > > Interesting idea. How would I get the time from SSI but update it every 
> > > second via my HTML? I've got the SSI part already but I'm at a loss how 
> > > to update that time  on an ongoing basis.
> > 
> > I'd actually like to see an implementation of that. Counting up seconds
> > may seem trivial at a first glance, but how would you go about writing a
> > clock display (with second precision) that is
> > 
> > a) as accurate as possible (relative to the local time on the client)
> > b) as "smooth" as possible (does not increment the seconds display by
> > more than 1, if it can be avoided)
> > c) can handle the client being busy for extended periods (caused by
> > things like complex calculations, synchronous HTTP requests, high CPU
> > load, etc)
> > d) doesn't tax the client by using very short timeouts or intervals
> > 
> > I've got some ideas about how to implement it, but I'm curious about
> > what solutions other people might come up with.
> 
> Here is what I came up with a while ago to provide a display of server
> time independent of the client's local time setting. It assumes that
> the client keeps good time, even though it is not in sync with the server.
> 
> Firstly clocktest.php (provides the start time in JS):
> 
> <!DOCTYPE html>
> <html>
> <head>
> <title>Clock Test</title>
> <style type="text/css">
> body { font-family: Arial, Helvetica, sans-serif; text-align: center; }
> a.link { text-decoration: none; color: #FF3399; font-weight: bold; }
> a.link:hover { text-decoration: underline; }
> </style>
> <?php
> $m=microtime();
> $z=date('Z');
> list($us,$s) = explode(' ',$m);
> $start = ((float)$s+$z+(float)$us)*1000.;
> ?>
> <!-- $m = "<?= $m ?>", $us = <?= $us ?>, $s = <?= $s ?>, $z = <?= $z ?> -->
> <script type="text/javascript">
> var serverstart=<?= $start ?>;  // JS uses milliseconds
> </script>
> <script type="text/javascript" src="clock.js"></script>
> </head>
> 
> <body>
> <h3>Current Time on Server - <span id="clock"></span></h3>
> </body>
> </html>
> 
> Secondly, clock.js (increments the time once per second):
> 
> var clientstart = new Date().getTime();
> 
> var days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
> var mths = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
> 
> // Custom formatting function - customize as required
> Date.prototype.outputDate = function() {
>         var d = this;
>         var h = d.getUTCHours();
>         var h12 = (h+11)%12 + 1;
>         var ap = (h < 12)?'am':'pm';
>         var m = ("0"+d.getUTCMinutes()).slice(-2);
>         var s = ("0"+d.getUTCSeconds()).slice(-2);
>         var t = days[d.getUTCDay()]
>                 +' '+d.getUTCDate()+' '+mths[d.getUTCMonth()]
>                 +' '+d.getUTCFullYear()
>                 +' '+h12+':'+m+':'+s+' '+ap;
>         return t;
> }
> 
> function update() {
>         var clock = document.getElementById('clock');
>         var clienttime = new Date().getTime();
>         var servertime = new Date(serverstart + (clienttime-clientstart));
>         //clock.innerHTML = servertime.toLocaleString();        // system standard format
>         clock.innerHTML = servertime.outputDate();              // custom format above
>         setTimeout(update,1000-(servertime%1000));
> }
> 
> window.onload = update;

Unfortunately, I had some confusion in update() between millisecond times
and Date objects, and was not using servertime correctly. Here is a corrected version:

function update() {
        var clock = document.getElementById('clock');
        var clienttime = new Date().getTime();
        var servertime = serverstart + (clienttime-clientstart);
        //clock.innerHTML = new Date(servertime).toLocaleString();      // system standard format
        clock.innerHTML = new Date(servertime).outputDate();            // custom format above
        setTimeout(update,1000-(servertime%1000));
}

Cheers
Tony
-- 
Tony Mountifield
Work: tony@softins.co.uk - http://www.softins.co.uk
Play: tony@mountifield.org - http://tony.mountifield.org

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Re: OT: Displaying current time on a website Rhino <no_offline_contact_please@example.com> - 2013-11-27 16:15 -0500
  Re: OT: Displaying current time on a website Denis McMahon <denismfmcmahon@gmail.com> - 2013-11-28 01:11 +0000
    Re: OT: Displaying current time on a website "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2013-11-28 11:20 +0200
      Re: OT: Displaying current time on a website Denis McMahon <denismfmcmahon@gmail.com> - 2013-11-29 00:12 +0000
        Re: OT: Displaying current time on a website Andrew Poulos <ap_prog@hotmail.com> - 2013-11-29 13:51 +1100
        Re: OT: Displaying current time on a website Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-11-29 10:58 +0100
    Re: OT: Displaying current time on a website Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-11-29 21:30 +0000
  Re: OT: Displaying current time on a website Stefan Weiss <krewecherl@gmail.com> - 2013-11-28 23:09 +0100
    Re: OT: Displaying current time on a website tony@mountifield.org (Tony Mountifield) - 2013-11-28 23:24 +0000
      Re: OT: Displaying current time on a website tony@mountifield.org (Tony Mountifield) - 2013-11-29 13:12 +0000
        Re: OT: Displaying current time on a website Stefan Weiss <krewecherl@gmail.com> - 2013-11-29 14:39 +0100
        Re: OT: Displaying current time on a website Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-11-30 20:35 +0000
          Re: OT: Displaying current time on a website "Evertjan." <exjxw.hannivoort@interxnl.net> - 2013-12-01 07:57 +0000

csiph-web