Let's Be Friends!

Like us on Facebook to stay glued to our unbeatable updates.
Like Now!
My Dad Told Me Not To Leave Jesus – Reekado Banks

How to Make a Digital Clock With JavaScript

How to Make a Digital Clock With JavaScript
Creating a digital clock with JavaScript is pretty easier (for those that has already fallen in love with HTML, CSS and JavaScript). However, this process is so simple that even a novice can just get it right!

Let's Start

First we are going to prepare our HTML and CSS. Let's make the id of the clock element be "clk".

The HTML Document

<!DOCTYPE html>

<html>  

<head>  

<title>Making a Digital Clock With JavaScript</title>   

</head>

<body>  

<!-- The element for the clock -->  

<div id="clk"></div>  

</body>  

</html>

The CSS Document

/* We want to give the clock interface some little styles, so we have to use CSS.  

*/  

#clk  

{  

padding:16px;  

background:#000;  

font-weight:bold;  

color:#fff;  

text-align:center;  

font-size:16px;  

font-family:Arial,sans-serif;  

}

The JavaScript Document

//Create a function that loads the clock properties using the JavaScript Date() function.  

function clock()  

{  

// call the Date() property and assign it to a variable "time"  

var time = new Date();  

  

// get the date hours  

var hour = time.getHours();  

  

//get the date minutes  

var minute = time.getMinutes();  

  

//get the date seconds  

var seconds = time.getSeconds();  

  

//put hour, minute and seconds together to make up a digital clock  

var dgclock = hour+':'+minute+':'+seconds;  

  

//Now add this to the clock element to make it visible for users  

document.getElementById('clk').innerHTML=dgclock;  

  

//To make it work well as a real digital clock, we need to use JavaScript timings.  

//JavaScript timings executes a give code repeatedly within a given period of time.  

var t=setTimeout(function(){clock();},500);  

}  

  

//We want to make our clock start working immediately after the page is loaded,   

//and so we add to event to the <body> element  

document.body.onload=clock;

With the above code, you can make a simple JavaScript calculator. Happy coding!

Add Your Comment

Recent Replies (0)

NEXT POST IN TIPS
World Clock

Lagos, Nigeria.

05:17 AM

Wasington D.C., USA.

12:17 AM

London, UK.

05:17 AM
End of Result