| |
|
In this tutorial we will learn how to display a digital javascript clock on your web page , like the following
This is your clock
To display a live clock on the page you have to execute the javascript code for displaying the clock again and again , after 1 second interval. You can do this by using a javascript function
setTimeout("functionname", interval in milliseconds)
You can say this is the heart of your clock which beats every 1 seconds , continuously.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from old browsers
var ticktick;
function stopClock(){
clearTimeout(ticktick);
}
function KoderGuruClock(){
//This is the main function which displays the clock
var nd = new Date();
var h, m;
var s;
var time = " ";
h = nd.getHours();
m = nd.getMinutes();
s = nd.getSeconds();
if (h <= 9) h = "0" + h;
if (m <= 9) m = "0" + m;
if (s <= 9) s = "0" + s;
time += h + ":" + m + ":" + s;
var a = document.getElementById("yourclock");
// get the span element where the clock will be displayed
a.innerHTML=time;
ticktick = setTimeout("KoderGuruClock()", 1000);
// call the function KoderGuruClock() in every 1 second interval
}
Stop hiding -->
</SCRIPT>
</HEAD>
<BODY onLoad="KoderGuruClock()", onUnload="stopClock(); return true">
<span id = "yourclock" style="background-color:#00FF33; font-weight: bold;"></span>
This is your clock.Please visit KoderGuru.com for more tutorials like this.
</BODY>
</HTML>
Hope you have enjoyed the tutorial. Thank You.
Back to Tutorial Index page
Your comments are most welcome admin@koderguru.com
|
|
|
