Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Clock code only working in IE

    Hi all,

    I've found a small script that displays the current time.
    The only problem is that it only works with IE and I'd like to make it work on all browsers (or at least Mozilla)

    Would you mind helping me ?

    Note: I'd like to keep the code using the "span" tag

    Here's the html code (to show the way I call the script):

    Code:
    <html>
    <head>
    <SCRIPT language="JavaScript" SRC="clock.js"></SCRIPT> 
    </head>
    <body onLoad="clock()" bgcolor="#ECEDF3">
    
    <font face="Verdana" size="1" color="#88A6C0"><span id="pendule" ></span>
    
    </body>
    </html>
    and here's the script I use (It's an external script that I called clock.js):
    I believe the declarations are OK and the problem comes from "document."
    I know there are differences the way IE and other browsers manage scripts but I'm not enough experienced to find all variants.

    Code:
    <!-- Begin
    function clock() {
    if (!document.layers && !document.all) return;
    var digital = new Date();
    var hours = digital.getHours();
    var minutes = digital.getMinutes();
    var seconds = digital.getSeconds();
    
    var amOrPm = "AM";
    
    if (hours > 11) amOrPm = "PM";
    if (hours > 12 ) hours = hours - 12;
    if (hours == 0) hours = "00";
    if (minutes <= 9) minutes = "0" + minutes;
    if (seconds <= 9) seconds = "0" + seconds;
    dispTime = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
    
    
    if (document.layers) {
    document.layers.pendule.document.write(dispTime);
    document.layers.pendule.document.close();
    }
    else
    if (document.all)
    pendule.innerHTML = dispTime;
    
    setTimeout("clock()", 1000);
    }
    //  End -->
    Any idea about what's wrong ?
    Thank you for your help

    Gino
    Last edited by Gino; 06-20-2010 at 09:31 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    This is ancient code. <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code. document.layers goes back to Netscape 4.

    Change your script to:-

    Code:
    <script type = "text/javascript">
    
    function clock() {
    var digital = new Date();
    var hours = digital.getHours();
    var minutes = digital.getMinutes();
    var seconds = digital.getSeconds();
    
    var amOrPm = "AM";
    
    if (hours > 11) amOrPm = "PM";
    if (hours > 12 ) hours = hours - 12;
    if (hours == 0) hours = "00";  // should be = 12 in 12-hour clock
    if (minutes <= 9) minutes = "0" + minutes;
    if (seconds <= 9) seconds = "0" + seconds;
    dispTime = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
    
    pendule.innerHTML = dispTime;
    
    setTimeout("clock()", 1000);
    }
    </script>
    (No HTML tags <script type = "text/javascript"> </script> in the external file).


    Be aware that setTimeout() will introduce a small inaccuracy which although insignificant at first will accumulate so that your clock may lose say a couple of minutes a day. Here is a better version using setInterval():-

    Code:
    <html>
    <head>
    
    <script type="text/javascript"> 
    
    function startTime() {
    RunClock();
    t = setInterval('RunClock()',1000);
    }
    
    function RunClock() { 
    var today = new Date();
    
    var h = today.getHours();
    var h1 = h; 
    var m = today.getMinutes();
    var s = today.getSeconds(); 
    var ampm = " AM";
    
    if (h >= 12) {ampm = " PM"}
    if (h >= 13) {h = h - 12}
    if (h1 == 0) {h = 12}
    
    h = leadZero(h);  // if zero before hours is required
    m = leadZero(m); 
    s = leadZero(s); 
    
    document.getElementById('Clock').innerHTML = h + ":" + m + ":"+ s + ampm; // delete ampm if desired
    
    } 
    
    function leadZero(x) { 
    if (x < 10){x = "0" + x}
    return x; 
    } 
    
    </script> 
    </head> 
    
    <body onload = "startTime()"> 
    
    <div id = "Clock" name = "Clock"></div>
    
    </body>
    </html>
    "I am not a vegetarian because I love animals; I am a vegetarian because I hate plants." - A. Whitney Brown.
    Last edited by Philip M; 06-20-2010 at 10:24 AM.

  • Users who have thanked Philip M for this post:

    Gino (06-20-2010)

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hello Philip,

    Thank you very much for your help and the associated information.
    (Sure I've got to learn more about JS)

    Best regards

    Gino

    PS: The script works now


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •