SnTT: Multiple Javascript clocks with DST and TimeZone.
Hello,
Today I needed to add a number of clocks to a web page using Javascript. I hunted round for a script that respected DST changes (the new American ones too), allowed me to create more than one instance of a clock and configure each clock individually. Couldn't find one so I adapted one I found at www.rainbow.arch.scriptmania.com/tools/clock (thank you!) creating a clock class and parameterising.
I'm at the stage where it works (and that's what you can see below). Next step would be to put the Javascript in a file and integrate it with the application. I though't I'd share it with you in the hope that someone would suggest a way to do it better or that it might help someone else. I think I'll do away with the setInterval every 1 second and construct something that just updates each minute.
The inline CSS will get added to the applications stylesheet this code was just an easy way to develop and test.
Scroll down to the end to see what the current set of clocks look like.
Today I needed to add a number of clocks to a web page using Javascript. I hunted round for a script that respected DST changes (the new American ones too), allowed me to create more than one instance of a clock and configure each clock individually. Couldn't find one so I adapted one I found at www.rainbow.arch.scriptmania.com/tools/clock (thank you!) creating a clock class and parameterising.
I'm at the stage where it works (and that's what you can see below). Next step would be to put the Javascript in a file and integrate it with the application. I though't I'd share it with you in the hope that someone would suggest a way to do it better or that it might help someone else. I think I'll do away with the setInterval every 1 second and construct something that just updates each minute.
The inline CSS will get added to the applications stylesheet this code was just an easy way to develop and test.
Scroll down to the end to see what the current set of clocks look like.
<html>
<head></head>
<body>
<style>
.clocklabel {
color: #595959;
font-size:8pt;
font-family: sans-serif;
font-weight: bold;
}
.clockdate {
color: #595959;
font-size:8pt;
font-family: sans-serif;
font-weight: normal;
}
.clocksHidden {
visibility: hidden;
}
.clocksVisible {
visibility: display;
}
</style>
<div id="clocks" class="clocksHidden"><span class="clocklabel">US Eastern </span><span id="use" class="clockdate"></span> | <span class="clocklabel">United Kingdom </span><span id="uk" class="clockdate"></span> | <span class="clocklabel">India </span><span id="ind" class="clockdate"></span> | <span class="clocklabel">Japan </span><span id="ggk" class="clockdate"></span></div>
<script language="JavaScript">
// This script is based on a script by
// Anytime Anywhere Web Page Clock Generator
// Clock Script Generated at
// www.rainbow.arch.scriptmania.com/tools/clock
// and Modified by Jason Hook
function clock(obsDST,S1, S2,S3,S4,E1,E2,E3,E4,TZ_OFFSET,TARGET) {
this.dayNames=new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
this.obsDST = obsDST;
this.TZO = TZ_OFFSET;
this.TARG = TARGET;
this.S1 = S1;
this.S2 = S2;
this.S3 = S3;
this.S4 = S3;
this.E1 = E1;
this.E2 = E2;
this.E3 = E3;
this.E4 = E4;
}
function timeSource(mythis){
x=new Date(timeNow().getUTCFullYear(),timeNow().getUTCMonth(),timeNow().getUTCDate(),timeNow().getUTCHours(),timeNow().getUTCMinutes(),timeNow().getUTCSeconds());
if (mythis.obsDST) {
x.setTime(x.getTime()+daylightSaving(mythis)+mythis.TZO);
} else {
x.setTime(x.getTime()+mythis.TZO);
}
return x;
}
function timeNow(){
return new Date();
}
function daylightSaving(mythis){
return ((timeNow().getTime()>findDay(mythis.S1,mythis.S2,mythis.S3,mythis.S4).getTime())&&(timeNow().getTime()<findDay(mythis.E1,mythis.E2,mythis.E3,mythis.E4).getTime()))?3600000:0;
}
function findDay(d,m,h,p){
var week=(p<0)?7*(p+1):7*(p-1),nm=(p<0)?m+1:m,x=new Date(timeNow().getUTCFullYear(),nm,1,h,0,0),dOff=0;
if(p<0){
x.setTime(x.getTime()-86400000);
}
if(x.getDay()!=d){
dOff=(x.getDay()<d)?(d-x.getDay()):0-(x.getDay()-d);
if(p<0&&dOff>0){
week-=7;
}
if(p>0&&dOff<0){
week+=7;
}
x.setTime(x.getTime()+((dOff+week)*86400000));
}
return x;
}
function leadingZero(x){
return (x>9)?x:'0'+x;
}
function displayTime(){
var myTimeSource = timeSource(this);
// this.time = this.dayNames[myTimeSource.getDay()]+' '+leadingZero(myTimeSource.getHours())+':'+leadingZero(myTimeSource.getMinutes())+':'+leadingZero(myTimeSource.getSeconds());
this.time = this.dayNames[myTimeSource.getDay()]+' '+leadingZero(myTimeSource.getHours())+':'+leadingZero(myTimeSource.getMinutes())
document.getElementById(this.TARG).innerHTML= this.time;
}
clock.prototype.dTime = displayTime;
</script>
<script>
uk_clock = new clock(true,0,2,2,-1,0,9,3,-1,0,'uk')
us_east_clock = new clock(true,0,2,3,2,0,10,3,1,-18000000,'use');
india_clock = new clock(false,0,0,0,0,0,0,0,0,19800000,'ind');
jp_clock = new clock(false,0,0,0,0,0,0,0,0,32400000,'ggk');
setInterval('uk_clock.dTime();us_east_clock.dTime();india_clock.dTime();jp_clock.dTime();document.getElementById("clocks").className = "clocksVisible";',1000);
</script>
</body>
</html>
Here's a picture of the clocks...
Comments