asked on

Javascript clock (crossbrowser)

I am using the following code:
--------------------------------------------------------------------------------
<html>
<head>
      <title>Untitled</title>
<script>
types = new Array(
      "local",
      "server",
      "beat"
);
mil=true;
offset=0;
function start(tz,loc,ser,mil) {
      ctype=0;
      count=0;
      oneHour=60*60*1000;
      offset=tz;
      if (!window.setInterval) getthedate();
      else setInterval("getthedate('"+loc+"', '"+ser+"', '"+mil+"')",1000);
}

function getthedate(loc,ser,mil) {
      if (++count > 10) {
            ctype++; if (ctype>=types.length) ctype=0;
            count=0;
      }
      var mydate=new Date();
      if (types[ctype]=="server") {
            mydate=new Date(mydate.getTime() + (offset*oneHour));
      }
      var year=mydate.getYear();
      if (year<1000) year+=1900;
      var day=mydate.getDay();
      var month=mydate.getMonth();
      var daym=mydate.getDate();
      if (daym<10) daym="0"+daym;
      var hours=mydate.getHours();
      var minutes=mydate.getMinutes();
      var seconds=mydate.getSeconds();
      var dn="";
      if (mil!=1) {
            var dn="AM";
            if (hours>11) {
                  dn="PM";
                  hours=hours-12;
            }
      }

      if (minutes<=9) minutes="0"+minutes;
      if (seconds<=9) seconds="0"+seconds;
      cdated=""+dayarray[day]+", "+daym+" "+montharray[month]+", "+year;
      if (types[ctype] == 'beat') {
            gmt = new Date(new Date(year,month,day,hours,minutes,seconds).toGMTString());
            beatDateInMilli= gmt.getTime() - (new Date(gmt.getYear(),gmt.getMonth(),gmt.getDate(),0,0,0)).getTime();
            beatDate = parseInt(beatDateInMilli/(1000*86.4));
            cdate= "<a href=\"http://www.swatch.com/fs_index.php?haupt=itime\" title=\"Internet Time\"target=\"_blank\">"+cdated+" @"+beatDate+"</a>";
      }
      else {
            cdated += " "+hours+":"+minutes+":"+seconds+" "+dn+"";
            if (types[ctype]=="local") cdate=cdated+" ("+loc+")";
            else cdate=cdated+" ("+ser+")";
      }
      if (document.all) document.all.clock.innerHTML=cdate;
      else if (document.layers) {
            document.clock.document.write(cdate);
            document.clock.document.close();
      }
      else document.myForm.myClock.value=cdate;
      if (!window.setInterval) setTimeout("getthedate('"+mil+"')",1000);
}

var set_start;
var dayarray=new Array("Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag");
var montharray=new Array("januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december");

start(0,"lokaal","server",1);

</script>

</head>

<body>

<div id="clock" class="small" style="height: 10px;"></div>

</body>
</html>
--------------------------------------------------------------------------------

It does work when I am using IE.
I tried Opera and I think it will work there also.
Only the Beat time will be calculated wrong??
However I want it to be a cross browser version.
I tried it with Mozilla without success!
- How to make it work for Mozilla also.
I did not try firefox!!
Is it possible to make it work for firefox also (if it will not work for that)

Zvonko

The layer part is for Netscape4.7 only. Do you realy need that?

<html>
<head>
<title>Untitled</title>
<script>
types = new Array(
"local",
"server",
"beat"
);
mil=true;
offset=0;
function start(tz,loc,ser,mil) {
ctype=0;
count=0;
oneHour=60*60*1000;
offset=tz;
if (!window.setInterval) getthedate();
else setInterval("getthedate('"+loc+"', '"+ser+"', '"+mil+"')",1000);
}

function getthedate(loc,ser,mil) {
if (++count > 10) {
ctype++; if (ctype>=types.length) ctype=0;
count=0;
}
var mydate=new Date();
if (types[ctype]=="server") {
mydate=new Date(mydate.getTime() + (offset*oneHour));
}
var year=mydate.getYear();
if (year<1000) year+=1900;
var day=mydate.getDay();
var month=mydate.getMonth();
var daym=mydate.getDate();
if (daym<10) daym="0"+daym;
var hours=mydate.getHours();
var minutes=mydate.getMinutes();
var seconds=mydate.getSeconds();
var dn="";
if (mil!=1) {
var dn="AM";
if (hours>11) {
dn="PM";
hours=hours-12;
}
}

if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
cdated=""+dayarray[day]+", "+daym+" "+montharray[month]+", "+year;
if (types[ctype] == 'beat') {
gmt = new Date(new Date(year,month,day,hours,minutes,seconds).toGMTString());
beatDateInMilli= gmt.getTime() - (new Date(gmt.getYear(),gmt.getMonth(),gmt.getDate(),0,0,0)).getTime();
beatDate = parseInt(beatDateInMilli/(1000*86.4));
cdate= "<a href=\"http://www.swatch.com/fs_index.php?haupt=itime\" title=\"Internet Time\"target=\"_blank\">"+cdated+" @"+beatDate+"</a>";
}
else {
cdated += " "+hours+":"+minutes+":"+seconds+" "+dn+"";
if (types[ctype]=="local") cdate=cdated+" ("+loc+")";
else cdate=cdated+" ("+ser+")";
}
if (document.all) document.all.clock.innerHTML=cdate;
else if (document.layers) {
document.clock.document.write(cdate);
document.clock.document.close();
}
else document.getElementById("clock").innerHTML=cdate;
if (!window.setInterval) setTimeout("getthedate('"+mil+"')",1000);
}

var set_start;
var dayarray=new Array("Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag");
var montharray=new Array("januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december");

start(0,"lokaal","server",1);

</script>

</head>

<body>

<div id="clock" class="small" style="height: 10px;">
<layer name="clock"></layer>
</div>
</body>
</html>

weversbv

ASKER

After adding the following line:
-------------------------------------------------------------
else if (document.getElementById) document.getElementById("clock").innerHTML=cdate
-------------------------------------------------------------

so it becomes:

-------------------------------------------------------------
if (document.all) document.all.clock.innerHTML=cdate;
else if (document.getElementById) document.getElementById("clock").innerHTML=cdate
else if (document.layers) {
-------------------------------------------------------------

will make it work in Mozilla an Firefox.
However the beat time wil still be calculated wrong!

Is the code:

-------------------------------------------------------------
else if (document.layers) {
document.clock.document.write(cdate);
document.clock.document.close();
}
-------------------------------------------------------------

still required?

Zvonko

layers without <layer> tag make no sense. And it makes sense only for NN4.7 Do you need NN4.7 comaptibility?

I have tested in FF1.0 and IE6.0

weversbv

ASKER

Did you look at the beat time!
In IE it will show you the right time!
In mozilla, opera and firefox it will return an wrong number!
Could you take a look at the beat part?

weversbv

ASKER

I removed the layer part. Do not need it anymore!

weversbv

ASKER

beatDateInMilli= gmt.getTime() - (new Date(gmt.getYear(),gmt.getMonth(),gmt.getDate(),0,0,0)).getTime();

This line will return in IE a number like:
67634000
but in mozilla something like:
59958294420000
(not taken exactly on the same time)

You see the number in mozilla/ firefo is a lot bigger??

Michel Plungjan

change
gmt.getYear()

to
gmt.getFullYear()

Michel Plungjan

NS/Mozilla are in year 105
and IE is in 05

I wonder if IE will have a lot of clocks fail in 08 and 09 when it becomes invalid octal ;)

weversbv

ASKER

I have changed the Beat part to:

beat_mydate = new Date(mydate.getTime() + (mydate.getTimezoneOffset() + 60) * 60 * 1000);
beat_hours = beat_mydate.getHours() * 1000 * 60 * 60 ;
beat_minutes = beat_mydate.getMinutes() * 1000 * 60;
beat_seconds = beat_mydate.getSeconds() * 1000;
sub_beat = Math.floor((beat_hours + beat_minutes + beat_seconds) / (60 * 60 * 24 / 100)) / 100;
sub_beat = Math.round((1-(Math.ceil(sub_beat)-sub_beat))*100);
beat = Math.floor((beat_hours + beat_minutes + beat_seconds) / (60 * 60 * 24));
// check for various cases that don't work correctly
if (beat < 10) beat = "00" + beat;
if (beat < 100) beat = "0" + beat;
if (sub_beat == 100) sub_beat = "0";
if (sub_beat < 10) sub_beat = "0"+sub_beat;
cdate = cdated+" @"+beat+"."+sub_beat+" (beat)";

It does work for IE, Mozilla, Opera, Firefox
It also shows sub beats.

Is the code so correct to be cross browser??
I am a javascript Newbee!!

Complete code:
<html>
<head>
      <title>Untitled</title>
<script>
types = new Array(
      "local",
      "server",
      "beat"
);
mil=true;
offset=0;
function start(tz,loc,ser,mil) {
      ctype=0;
      count=0;
      oneHour=60*60*1000;
      offset=tz;
      if (!window.setInterval) getthedate();
      else setInterval("getthedate('"+loc+"', '"+ser+"', '"+mil+"')",1000);
}

function getthedate(loc,ser,mil) {
      if (++count > 10) {
            ctype++; if (ctype>=types.length) ctype=0;
            count=0;
      }
      var mydate=new Date();
      if (types[ctype]=="server") {
            mydate=new Date(mydate.getTime() + (offset*oneHour));
      }
      var year=mydate.getYear();
      if (year<1000) year+=1900;
      var day=mydate.getDay();
      var month=mydate.getMonth();
      var daym=mydate.getDate();
      if (daym<10) daym="0"+daym;
      var hours=mydate.getHours();
      var minutes=mydate.getMinutes();
      var seconds=mydate.getSeconds();
      var dn="";
      if (mil!=1) {
            var dn="AM";
            if (hours>11) {
                  dn="PM";
                  hours=hours-12;
            }
      }

      if (minutes<=9) minutes="0"+minutes;
      if (seconds<=9) seconds="0"+seconds;
      cdated=""+dayarray[day]+", "+daym+" "+montharray[month]+", "+year;
      if (types[ctype] == 'beat') {
            beat_mydate = new Date(mydate.getTime() + (mydate.getTimezoneOffset() + 60) * 60 * 1000);
            beat_hours = beat_mydate.getHours() * 1000 * 60 * 60 ;
            beat_minutes = beat_mydate.getMinutes() * 1000 * 60;
            beat_seconds = beat_mydate.getSeconds() * 1000;
            sub_beat = Math.floor((beat_hours + beat_minutes + beat_seconds) / (60 * 60 * 24 / 100)) / 100;
            sub_beat = Math.round((1-(Math.ceil(sub_beat)-sub_beat))*100);
            beat = Math.floor((beat_hours + beat_minutes + beat_seconds) / (60 * 60 * 24));
            // check for various cases that don't work correctly
            if (beat < 10) beat = "00" + beat;
            if (beat < 100) beat = "0" + beat;
            if (sub_beat == 100) sub_beat = "0";
            if (sub_beat < 10) sub_beat = "0"+sub_beat;
            cdate = cdated+" @"+beat+"."+sub_beat+" (beat)";
      }
      else {
            cdated += " "+hours+":"+minutes+":"+seconds+" "+dn+"";
            if (types[ctype]=="local") cdate=cdated+" ("+loc+")";
            else cdate=cdated+" ("+ser+")";
      }
      if (document.all) document.all.clock.innerHTML=cdate;
      else if (document.getElementById) document.getElementById("clock").innerHTML=cdate
      else document.myForm.myClock.value=cdate;
      if (!window.setInterval) setTimeout("getthedate('"+mil+"')",1000);
}

var set_start;
var dayarray=new Array("Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag");
var montharray=new Array("januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december");

start(0,"lokaal","server",1);

</script>

</head>

<body>

<div id="clock" class="small" style="height: 10px;"></div>

</body>
</html>

Michel Plungjan

Looks ok...

weversbv

ASKER

Can it be shortened?
Less line makes it smaller so it will be loaded faster!
(As I told zou I am a newbe I wants to learn it to do it the right way)

Michel Plungjan

var dayarray=new Array("Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag");
can be written

var dayarray="Zondag,Maandag,Dinsdag,Woensdag,Donderdag,Vrijdag,Zaterdag").split(",");
same for the months

In browsers newer than IE4 and NS3 you can change
var year=mydate.getYear();
if (year<1000) year+=1900;
to
var year=mydate.getFullYear();

I would use
yyyy mm dd
hh min ss
for the variable names

but the script is not THAT big

weversbv

ASKER

var dayarray="Zondag,Maandag,Dinsdag,Woensdag,Donderdag,Vrijdag,Zaterdag").split(",");

?? One ")" to much or a "(" to less??

Michel Plungjan

")" too many, sorry
var dayarray="Zondag,Maandag,Dinsdag,Woensdag,Donderdag,Vrijdag,Zaterdag".split(",");

weversbv

ASKER

I think:

      var dn="";
      if (mil!=1) {
            var dn="AM";

is one var to much??

Michel Plungjan

yeah..
var dn="";
if (mil!=1) {
var dn="AM";
if (hours>11) {
dn="PM";
hours=hours-12;
}
}

can be written

var dn="";
if (mil!=1) {
dn="AM";
if (hours>11) {
dn="PM";
hours-=12;
}
}

-----
a=a-x
can be written
a-=x
and
a=a+x
can be written
a+=x

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial