Dynamic Live World Clock

**gyancher** · 06-07-2005, 09:11 PM

Hi all,

I was searching on Dynamic Drive for a nice live clock and I wonder if we could make a Dynamic Live world clock with dates?

I found some javascripts on the net but all where not the thing I was looking for. My question for the forrum is if someone all ready made a script like this or maybe we can make one?

Kind Regards,

Gyancher

**jscheuer1** · 06-08-2005, 02:43 AM

You haven't been very specific about what kind of clock you want but, Max Blade's Clock Generator can make just about any clock you like.

**gyancher** · 06-08-2005, 01:01 PM

I was thinking of multiple clocks on 1 page that are live updating

like Amsterdam, London, Madrid, Paris, Beijing, Milan, Tokyo, Sydney
I have webcams of all those city's for monitoring our servers and it would be nice to see the time/date on those location as well.

The Maxx Blade clock is very nice and maybe I can use external html in a layer to make this possible.

ill try it out,..

thnx,..

Gyancher

**gyancher** · 06-08-2005, 02:47 PM

Oke, I made a small script that worked for me,.. thank you for the input

-------------
<SCRIPT LANGUAGE="JavaScript">

</script>
</HEAD>

<BODY onLoad="javascript:GetTime();">

<center>
<form name="clock">
<table border="0" cellpadding="0" id="table1" width="800">
<tr>
<td width="160" align="center">Mannheim - Germany<br><input type="text" size="8" name="de"></td>
<td width="160" align="center">Southampton- U.K<br><input type="text" size="8" name="azo"></td>
<td width="160" align="center"><strong>Madison - USA<br><input type="text" size="8" name="local"></strong></td>
<td width="160" align="center">Sydney - Australia<br><input type="text" size="8" name="sdn"></td>
<td width="160" align="center">Beijing - China<br><input type="text" size="8" name="ho"></td>
</tr>
<tr>
<td width="160" align="center">Leiden - The Netherlands<br><input type="text" size="8" name="nl"></td>
<td width="160" align="center">Milan - Italy<br><input type="text" size="8" name="it"></td>
<td width="160" align="center">SLO - USA<br> <input type="text" size="8" name="pacif"></td>
<td width="160" align="center">Madrid - Spain<br><input type="text" size="8" name="sp"></td>
<td width="160" align="center">Tokyo - Japan<br><input type="text" size="8" name="tky"></td>
</tr>
<tr>
<td width="160" align="center">Lyon - France<br><input type="text" size="8" name="fr"></td>
<td width="160" align="center">Zurich - Switzerland<br><input type="text" size="8" name="zur"></td>
<td width="160" align="center"> </td>
<td width="160" align="center"> </td>
<td width="160" align="center"> </td>
</tr>
</table>

</form>
</center>

**jscheuer1** · 06-08-2005, 04:34 PM

That's a very nice script. I think you missed something. Local time isn't the time in Madison for everyone. I'm near Philadelphia (currently EDT) and my time is showing in the Madison field but it should show one hour earlier (CDT) or, if you are ignoring daylight savings, two hours earlier (CST).

Also, if SLO is meant to be PST you've got it right except that the time in effect on the west coast of the US is currently PDT. This might not be a problem once you get Madison to work outside of the US Central zone and adjust the rest of the script accordingly.

I'm not familiar with any of the other times used so, cannot comment on them right now.

**mwinter** · 06-08-2005, 05:24 PM

Originally Posted by gyancher

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

HTML Code:

<script type="text/javascript">

and remove the comment (the one at the end, too).

function GetTime() {

You could simply things a lot in this function by defining a few utility methods and using modulus, rather than arithmetic.

Code:

Number.prototype.pad = function(length, radix) {
  return (+this).toString(+radix || 10).pad(length, '0');
};
String.prototype.pad = function(length, character) {
  var s = String(this),
      i = s.length;

  while(i < length) {s = character + s;}
  return s;
};


function updateTime() {
  var now      = new Date(),
      elements = document.forms.clock.elements,
      tail     = ':' + now.getMinutes().pad(2)
               + ':' + now.getSeconds().pad(2);

  elements.local.value = now.getHours().pad(2) + tail;
  elements.ho.value = ((now.getUTCHours() + 8) % 24).pad(2) + tail;
  elements.tky.value = ((now.getUTCHours() + 9) % 24).pad(2) + tail;

  /* etc. */
}

Of course, that doesn't address the issue of time zones. Dr Stockton does, on the basis of the TZ database, which you can read in his section on general, remote civil date and time. If need be, I'll expand the code above to include the relevant algorithms, but I doubt I'll have time until tomorrow.

The javascript: is unnecessary.

Mike

**gyancher** · 06-22-2005, 05:15 PM

Thank you all,..
My bose is happy now everything works..
here's a picture how the end result is.

**lovebird** · 10-28-2006, 07:44 PM

Re. Clock v2.0d from Maxxblades site;

Hi, I am new to this site and i do not know if i am in the correct section for the following question. I have downloaded the above script and what i want to do now is change the color and fonts sizes?

Thanking you in advance

**jscheuer1** · 10-29-2006, 07:27 AM

Since this script is actually a script wizard (meaning it generates different code and markup depending upon how you fill out its fields before copying it from the page), it would probably be easier if you were to put up a live demo of your version somewhere and post a link to it here along with an explanation of just what parts of it you want to change the styles on and to what style you want each thing changed.

Oh, and before we go reinventing the wheel, it appears that Mr Blade has a forum dedicated to this script:

http://support.maxxblade.co.uk/forumdisplay.php?f=8

Check there first.

Particularly this thread:

http://support.maxxblade.co.uk/showthread.php?t=5

**tech_support** · 10-29-2006, 07:47 AM

Submit your code.

Thread: Dynamic Live World Clock

Thread Tools

Search Thread

Dynamic Live World Clock

Found a nice script

Thank you

Clock V2.0d by Maxxblade

Bookmarks

Bookmarks

Posting Permissions