In this blog, we will learn about how to create a simply animated digital clock with javascript. As we know, browser executes any javascript program at the client side, this means that the script will take the time of the client computer and will display it.

HTML:-

<div class="digitalClock">
	<div class="dial">
		<div id="calender">Monday 14 January 2013</div>
		<span id="hours">10</span>
		<span class="dot">:</span>
		<span id="minutes">13</span>
		<span class="dot">:</span>
		<span id="seconds">03</span>
	</div>
</div>

First create a newDate object:

var newDate = new Date();

to get the current date from the Date object :
 

newDate.setDate(newDate.getDate());

setInterval( function() {

// Create a newDate() object and seconds of the current time

var getseconds = new Date().getSeconds();

// Add a leading zero to seconds value

$("#seconds").html(( getseconds < 10 ? "0" : "" ) + getseconds);

},1000);

Here in the above lines of code we first create a date object and then will extract the seconds value using the getSeconds() method. The getsecond method returns the value ( form 0 to 59 ) of the mentioned date amd time. After 60 seconds interval we will call another function with minutes value using getMinutes() method.

setInterval( function() {

// Create a newDate() object and extract the minutes of the current time

var getminutes = new Date().getMinutes();

// Add a leading zero to the minutes value

$("#minutes").html(( getminutes < 10 ? "0" : "" ) + getminutes);

},1000);

the getMinutes() method returns the value (from 0 to 59) of the mentioned date and time. After 60 minutes of time interval another function call will give the value for hours.

setInterval( function() {

// Create a newDate() object and extract the hours of the current time

var gethours = new Date().getHours();

// Add a leading zero to the hours value

$("#hours").html(( gethours < 10 ? "0" : "" ) + gethours);

}, 1000);

the getHours() method returns the value ( from 0 to 23 ) of the newDate object.

Please find the code attached.