...

View Full Version : Clock code only working in IE



Gino
06-20-2010, 08:25 AM
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):


<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.


<!-- 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

Philip M
06-20-2010, 09:54 AM
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:-


<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():-


<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.

Gino
06-20-2010, 10:25 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum