Latest tutorial: Making a Movieclip face another Movieclip or point on the stage | Ask Tutorial5!
 

Get tutorials on EMail




Categories

Navigation

Put a digital clock made with JavaScript on your website
(28 votes)
Written by AnaS   

This tutorial aims to explain how to create and put on your website a JavaScript digital clock.
Create a new HTML file and name it JavaScriptClock.html.
In the HEAD section of your HTML document put the code below:

<script type="text/javascript">
/* showClock() function extracts the current time hours, minutes and seconds and then displays them in the div with showText id from the BODY section */

function showClock()
{
var clock=new Date();
var hours=clock.getHours();
var minutes=clock.getMinutes();
var seconds=clock.getSeconds();
// for a nice disply we'll add a zero before the numbers between 0 and 9
if (hours<10){
hours="0" + hours;
}
if (minutes<10){
minutes="0" + minutes;
}
if (seconds<10){
seconds="0" + seconds;
}
document.getElementById('showText').innerHTML=hours+":"+minutes+":"+seconds;
t=setTimeout('showClock()',500);
/* setTimeout() JavaScript method is used to call showClock() every 1000 milliseconds (that means exactly 1 second) */
}
</script>

Next call the showClock() funtion from the BODY section of your HTML document by using the onLoad Event Handler, like in the following code:

<body onload="showClock()">
<div id="showText"></div>
</body>

Great work! Now you have a JavaScript digital clock to put on your website.
See also: Creating a JavaScript photo gallery which automatically change

JavaScript digital clock example

Subscribe now via RSS feed and get all the new tutorials

written by Yogendra Kumar Kaushik , November 29, 2007

Hello......
I am new in this field , i am working on an application . I want to count the time of user how much time he/she logon particular section.

In this case after successfull login when user enter in his particular section time count should be start. it will carry on until user logout.

Can u please help me for making such clock.
written by sanjeewa , January 25, 2008

Thanz Man ...cool one for my blog . keep it going
written by icca , February 12, 2009

I want to do html website. can you help me how to create the clock's code?
written by p.naveen , February 24, 2009

How to display day date and time using javascript and Flash action script?

Do you need more help? Ask now!
 

busy
Last Updated ( Tuesday, 10 July 2007 )