Topic awaiting preservation: Javascript clock only updates when page reloads (Page 1 of 1)

I'm using the following code on a website to produce a clock:

<script language="JavaScript" type="text/javascript">

var mydate=new Date()

var year=mydate.getYear()

var day=mydate.getDay()

var month=mydate.getMonth()

var date=mydate.getDate()

var hours=mydate.getHours()

if (hours<10)

hours="0"+hours

var minutes=mydate.getMinutes()

if (minutes<10)

minutes="0"+minutes

var seconds=mydate.getSeconds()

if (seconds<10)

seconds="0"+seconds

var dayarray=new Array("Sun","Mon","Tue","Wed","Thurs","Fri","Sat")

var montharray=new Array("Jan","Feb","Mar","Apr","May","June","July","Aug","Sept","Oct","Nov","Dec")

var datearray=new Array("1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th","11th","12th","13th","14th","15th","16th","17th","18th","19th","20th","21st","22nd","23rd","24th","25th","26th","27th","28th","29th","30th","31st")

document.write("<font color='000000' face='verdana' font size='1'>"+hours+":"+minutes+":"+seconds+", "+dayarray[day]+", "+montharray[month]+" "+datearray[date]+", "+year+"</font>")

</script>

The script works fine, but the clock will only update when the page reloads. Particularly noticable because it displays seconds. Does anyone know how to make it always show the current time?

(Edited by AlterEgo on 12-11-2004 21:49)

I'm thinking you need to wrap what you have in a function, and use settimeout to invoke that function every second.

Yah, place that whole script inside a function, like...
function timeSet(){
//your script
}

Leave out the document write, cool? Now in your page, make a
<font color='000000' face='verdana' font size='1'><span id="theTime"></span></font>
Leave the content of that span blank, but place it in your page where you want it to display.

You'll also need to fire things up onload, so include this bit in your script...
window.onload = setup;
function setup(){
timer = document.getElementById("theTime");
setInterval('timeSet()',500);
timeSet();
}

Now, instead of that document.write in your existing function, now named "timer()", use a line like this instead...

timer.innerHTML = hours+":"+minutes+":"+seconds+", "+dayarray[day]+", "+montharray[month]+" "+datearray[date]+", "+year;

-----------------

Was that clear at all? It'll work, I just used a script just like this myself for a client site, it worked like a charm. I update the script evey 1/2 second instead of every second so it doesn't miss one due to slow computers. I will also admity that I cringed a bit using that <font> tag, but that's an issue for the CSS forum! =) Good luck to you!

Your pal, -doc-

(Edited by DocOzone on 12-11-2004 22:39)

Thank you very much sir, and may I say it is a great honour to have you reply to my thread, Mr. Ozone sir...
Oh yeah, cheers to you too Steve.
Anyway, seems clear to me, so I'll go and try it out.

My goodness! Is it really him? =)


 

no, it can't be Doc Ozone, the Lord Mad Scientist Sovereign of all the lands Ozone and just beyond that little green line over there...
Welcome home Doc!

Subtle and sly, he slinks back to the forum! Heh. I thought about saying something, but it just seemed easier to talk about clocks.

Your pal, -doc-

*looks out of his cell and sees a nice looking man*
Could it be? ...
Could he be? ...
Is he THE Doc Ozone? ...
Yes, yes, yes!

When I came across the first post yesterday before going to bed, I thought it must be some kind of joke. But now here's another one, and he almost feels real, so what can I say....

Good to see you, Doc!

its the doc! weeeeee. well i am using this chance to ask you: did you receive my pm in the GurusNetwork?
its sooo good to see you back in the halls!

B | T | E | P | L

Based on what you wrote, I now have this:

<script language="JavaScript" type="text/javascript">

function timeSet(){window.onload = setup;

function setup()

{timer = document.getElementById("theTime");

setInterval('timeSet()',500);

timeSet();

}

var mydate=new Date()

var year=mydate.getYear()

var day=mydate.getDay()

var month=mydate.getMonth()

var date=mydate.getDate()

var hours=mydate.getHours()

if (hours<10)

hours="0"+hours

var minutes=mydate.getMinutes()

if (minutes<10)

minutes="0"+minutes

var seconds=mydate.getSeconds()

if (seconds<10)

seconds="0"+seconds

var dayarray=new Array("Sun","Mon","Tue","Wed","Thurs","Fri","Sat")

var montharray=new Array("Jan","Feb","Mar","Apr","May","June","July","Aug","Sept","Oct","Nov","Dec")

var datearray=new Array("1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th","11th","12th","13th","14th","15th","16th","17th","18th","19th","20th","21st","22nd","23rd","24th","25th","26th","27th","28th","29th","30th","31st")

timer.innerHTML = hours+":"+minutes+":"+seconds+", "+dayarray[day]+", "+montharray[month]+" "+datearray[date]+", "+year;

}

</script>

Then in the document where I want it to appear I've got:

<font color='#000000' face='verdana' font size='1'><span id="theTime"></span></font>

This must be wrong as nothing appears on the page. So I've probably interpretated what you've said wrongly. Guess it wasn't so clear after all.
Since I'm fairly new to javascript I don't know what to do now. Could someone please point me in the directuion to go?

(Edited by AlterEgo on 12-12-2004 15:37)

The setup() function needs to be seperate from the timeSet() one, and you should set window.onload to setup() outside of a function, as well. Only that way, it and the setup() function will be called automatically when the page loads, which in turn will then activate the setInterval for timeSet().

This is what it could look like:


function timeSet() {
...
}
function setup() {
...
}
window.onload = setup;


kuckus

Hallelujah, it works! Thanks guys, especially DocOzone for taking some of his valuable time out of his busy schedule, yadda yadda yadda.

Hah! You guys, you make me blush almost! Really, ask any of the old farts, I'm luggin' around feets of clay, so to speak, and am quite the... just a guy. =) mas, I got your pm, but I'm still off in a place, so's I didn't get a chance to mess you back. Congratulations AlterEgo! Glad it's working, how about a link to check it out, eh?

Your pal, -doc-

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Good to have you amongst us Doc. Quite the little bombshell, your abrupt appearance. Makes me feel it's okay once again to believe in Santa Clause and the Easter Bunny too.


~whew - glad I managed to slip in my wimpy little post BEFORE Doc checked in!~

I have to add my two cents in this also! I think in the near-three years I've been hanging around this forum, I've only seen posts from the Doc on a few different occasions - so it's nice to hear from you again!

quote:

---

DocOzone said:

Glad it's working, how about a link to check it out, eh?

---

Well the site isn't online yet, so...no.