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

Groups > comp.lang.javascript > #22211

Re: OT: Displaying current time on a website

Show all headers | View raw

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;

Any improvements gratefully received!

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