1
#1
A Simple Clock for Your Site Pages
Posted December 4th 2012, 10:56pm
There are a number of clock scripts floating around in the vast Internet, but most try to turn a simple task into something complicated. Here's the simplest clock script you'll ever find!

First, place the following script in the location where you want the clock:

<script type="text/javascript">
/* <![CDATA[ */
function clock() {
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById('dd_time').innerHTML=t.replace(/:.. /,' ');
}
document.write('<div id="dd_time"></div>');
setInterval('clock()', 60000);
clock();
/* ]]> */
</script>

And guess what...that's it! You will now have a clock that functions exactly like the clock on this board. (It's inside the grey box in the logo.)

Important EDIT: If people access your site with iPhones and iPads, please use the clock() function in post #6. There is apparently a bug in Mobile Safari which may cause problems with the above clock() function.

If you want to style the clock text, just add some CSS, as in the following example:

#dd_time {font-size: 14px; font-weight: bold;}

For those using phpBB3, you would want the script in the overall_header.html or overall_footer.html template to insure the clock is displayed on all pages.

Enjoy!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
A Simple Clock for Your Site Pages
Posted December 5th 2012, 4:36pm
I love how you added it after the "solutions outside of the box" <3
φ
Posts: 237
Joined: October 29th 2011, 11:00pm
Location: england, united kingdom, stoke on trent
Likes Given: 20
Likes Received: 4
A Simple Clock for Your Site Pages
Posted December 5th 2012, 4:36pm
What's wrong with:
setInterval(function() {
document.getElementById('dd_time').innerHTML = (new Date()).toLocaleTimeString().replace(/:.. /,' ');
}, 60000);

Just seems a little bit more intuitive. Doesn't require a function or eval'd code, or unneeded memory (extremely minimal memory saving :P )

Also, is the replace regexp to remove seconds? If so, toLocaleTimeString() returns "HH:MM:SS", and no Timezone. So would need to be .replace(/:..\s?/, '') obviously.

EDIT: Was curious about what different browsers returned. Chrome and FF return "HH:MM:SS", while on my Iphone however I saw "HH:MM GMT" in the clock in the logo.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
A Simple Clock for Your Site Pages
Posted December 5th 2012, 5:26pm
Actually your solution will take MORE memory, not less, because setInterval() does not immediately execute the function. You would need to replicate the code in the function to get the clock to immediately display -- otherwise the user will be waiting 60 seconds to see the clock.

LGforum said:
Also, is the replace regexp to remove seconds? If so, toLocaleTimeString() returns "HH:MM:SS", and no Timezone. So would need to be .replace(/:..\s?/, '') obviously.

What I'm doing works just fine, so I guess it's not so obvious. ;) Besides, aren't you concerned about memory? Using \s is going to cost you a few bytes of memory and a few microseconds. :P

Thanks for letting me know about the Mobile Safari bug in the toLocaleTimeString() function. While it doesn't affect this site unless a user clicks the "Full Version" link in the mobile theme, it could affect other sites.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
A Simple Clock for Your Site Pages
Posted December 5th 2012, 5:53pm
Haha good point!
Though the regex does nothing really without that, since it doesn't match the seconds. Well at least I still see the seconds. However the regex I said was daft since it would remove the minutes not the seconds. I suppose /:..$/ or /:..(?:$|\s)/ for the IPhone reason.

C'mon though setInterval(clock, 60000); is considered better practise (and more efficient) than a string. Any specific reason you went with a string?
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
A Simple Clock for Your Site Pages
Posted December 5th 2012, 6:31pm
LGforum said:
C'mon though setInterval(clock, 60000); is considered better practise (and more efficient) than a string. Any specific reason you went with a string?

You need the quotes if you want setInterval() and setTimeout() to work properly with IE7 and IE8. Adding the quotes is a (very) small price to pay for compatibility...



To fix the bug in Mobile Safari that is returning the value of toTimeString() for toLocaleTimeString(), here is a replacement clock() function:

function clock() {
var d = new Date();
var h = d.getHours();
var m = String(d.getMinutes());
if (h==0) {h = '12:' + m + ' AM';}
else if (h==12) {h = '12:' + m + ' PM';}
else if (h>12) {h = String(h - 12) + ':' + m + ' PM';}
else {h = String(h) + ':' + m + ' AM';}
document.getElementById('dd_time').innerHTML = h;
}

I will be adding this revised function to this site, and will add a pointer in the first post to this revised function.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357

Who is online

Users browsing this forum: No registered users and 1 guest