This shows you the differences between two versions of the page.
simple_javascript_clock [2009/05/05 10:42] tkbletsc created |
simple_javascript_clock [2009/05/05 10:59] (current) tkbletsc |
||
---|---|---|---|
Line 1: | Line 1: | ||
<code> | <code> | ||
+ | |||
+ | |||
<html> | <html> | ||
<head> | <head> | ||
Line 11: | Line 13: | ||
} | } | ||
- | function updateClock ( ) | + | function getTimeFormatted() { |
- | { | + | |
var now = new Date ( ); | var now = new Date ( ); | ||
Line 33: | Line 34: | ||
else if (h==0) h=12; | else if (h==0) h=12; | ||
- | //var time_string = dows[dow] + " " + year + "-" + pad(mon,2) + "-" + pad(day,2) + " " + h + ":" + pad(m,2) + ":" + pad(s,2) + "." + pad(ms,3); | + | //return dows[dow] + " " + year + "-" + pad(mon,2) + "-" + pad(day,2) + " " + h + ":" + pad(m,2) + ":" + pad(s,2) + "." + pad(ms,3); |
- | var time_string = dows[dow] + " " + year + "-" + pad(mon,2) + "-" + pad(day,2) + " " + h + ":" + pad(m,2) + ampm; | + | return dows[dow] + " " + year + "-" + pad(mon,2) + "-" + pad(day,2) + " " + h + ":" + pad(m,2) + ampm; |
- | document.getElementById("clock").firstChild.nodeValue = time_string; | + | } |
+ | |||
+ | function updateClock ( ) { | ||
+ | var now = new Date ( ); | ||
+ | |||
+ | var s = now.getSeconds ( ); | ||
+ | var ms = now.getMilliseconds(); | ||
+ | |||
+ | document.getElementById("clock").firstChild.nodeValue = getTimeFormatted(); | ||
// wait til the next minute + 500ms, that way we only update the clock on minute change | // wait til the next minute + 500ms, that way we only update the clock on minute change | ||
- | // (for second-accuracy, use wait = 1000-ms) | + | // (for second-accuracy, use wait = 1000-ms+100) |
var wait = 60000 - (1000*s+ms) + 500; | var wait = 60000 - (1000*s+ms) + 500; | ||
+ | //var wait = 1000-ms+100; | ||
setTimeout('updateClock()', wait ); | setTimeout('updateClock()', wait ); | ||
} | } | ||
+ | |||
// --> | // --> | ||
</script> | </script> | ||
</head> | </head> | ||
- | <body onload="updateClock();"> | + | <body> |
- | <span id=clock> </span> | + | <span style="" id=clock> </span> |
+ | <script> | ||
+ | updateClock(); | ||
+ | document.getElementById("clock").title = "Page loaded: " + getTimeFormatted(); | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
+ | |||
+ | |||
+ | |||
</code> | </code> |