• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 471
  • Last Modified:

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)
0
weversbv
Asked:
weversbv
  • 8
  • 7
  • 2
1 Solution
 
ZvonkoSystems architectCommented:
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>

0
 
weversbvAuthor Commented:
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?

0
 
ZvonkoSystems architectCommented:
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

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
weversbvAuthor Commented:
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?
0
 
weversbvAuthor Commented:
I removed the layer part. Do not need it anymore!
0
 
weversbvAuthor Commented:
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??
0
 
Michel PlungjanIT ExpertCommented:
change
gmt.getYear()

to
gmt.getFullYear()
0
 
Michel PlungjanIT ExpertCommented:
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 ;)
0
 
weversbvAuthor Commented:
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>
0
 
Michel PlungjanIT ExpertCommented:
Looks ok...
0
 
weversbvAuthor Commented:
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)
0
 
Michel PlungjanIT ExpertCommented:

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
0
 
weversbvAuthor Commented:
var dayarray="Zondag,Maandag,Dinsdag,Woensdag,Donderdag,Vrijdag,Zaterdag").split(",");

?? One ")" to much or a "(" to less??
0
 
Michel PlungjanIT ExpertCommented:
")" too many, sorry
 var dayarray="Zondag,Maandag,Dinsdag,Woensdag,Donderdag,Vrijdag,Zaterdag".split(",");
0
 
weversbvAuthor Commented:
I think:

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

is one var to much??
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
Michel PlungjanIT ExpertCommented:
Also

          if (beat < 10) beat = "00" + beat;
          if (beat < 100) beat = "0" + beat;
can be written
beat = (1000+beat).toString().substring(1)

I am not sure of this
if (sub_beat == 100) sub_beat = "0";
should you not add one to beat then?
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now