PDA

View Full Version : 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 (http://www.maxxblade.co.uk/clock/) 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">
<!-- Begin
function GetTime() {
var dt = new Date();
var def = dt.getTimezoneOffset()/60;
var gmt = (dt.getHours() + def);
document.clock.local.value = (IfZero(dt.getHours()) + ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds()));
var ending = ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds());


var ho =check24(((gmt + 8) > 24) ? ((gmt + 8) - 24) : (gmt + 8));
document.clock.ho.value = (IfZero(ho) + ending);
var tky =check24(((gmt + 9) > 24) ? ((gmt + 9) - 24) : (gmt + 9));
document.clock.tky.value = (IfZero(tky) + ending);
var sdn =check24(((gmt + 10) > 24) ? ((gmt + 10) - 24) : (gmt + 10));
document.clock.sdn.value = (IfZero(sdn) + ending);

var de =check24(((gmt + 1) > 24) ? ((gmt + 1) - 24) : (gmt + 1));
document.clock.de.value = (IfZero(de) + ending);
var nl =check24(((gmt + 1) > 24) ? ((gmt + 1) - 24) : (gmt + 1));
document.clock.nl.value = (IfZero(nl) + ending);
var it =check24(((gmt + 1) > 24) ? ((gmt + 1) - 24) : (gmt + 1));
document.clock.it.value = (IfZero(it) + ending);
var fr =check24(((gmt + 1) > 24) ? ((gmt + 1) - 24) : (gmt + 1));
document.clock.fr.value = (IfZero(fr) + ending);
var zur =check24(((gmt + 1) > 24) ? ((gmt + 1) - 24) : (gmt + 1));
document.clock.zur.value = (IfZero(zur) + ending);
var sp =check24(((gmt + 1) > 24) ? ((gmt + 1) - 24) : (gmt + 1));
document.clock.sp.value = (IfZero(sp) + ending);

var pacif =check24(((gmt + (24-8)) >= 24) ? ((gmt + (24-8)) - 24) : (gmt + (24-8)));
document.clock.pacif.value = (IfZero(pacif) + ending);
var azo =check24(((gmt + (24-1)) > 24) ? ((gmt + (24-1)) - 24) : (gmt + (24-1)));
azo = (azo >= 24) ? azo - 24 : azo;
document.clock.azo.value = (IfZero(azo) + ending);
setTimeout("GetTime()", 1000);
}
function IfZero(num) {
return ((num <= 9) ? ("0" + num) : num);
}
function check24(hour) {
return (hour >= 24) ? hour - 24 : hour;
}
// End -->
</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">&nbsp;</td>
<td width="160" align="center">&nbsp;</td>
<td width="160" align="center">&nbsp;</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
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
<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.


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 (http://www.merlyn.demon.co.uk/js-date5.htm#GRCDT). If need be, I'll expand the code above to include the relevant algorithms, but I doubt I'll have time until tomorrow.


<BODY onLoad="javascript:GetTime();">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.
http://webpages.charter.net/gyancher/photo/time%20portal.JPG

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.

lovebird
10-29-2006, 12:42 PM
Thanks guys, I have posted the same question at Mr Blade's forum, which i found after i posted here.