Let's Be Friends!

Like us on Facebook to stay glued to our unbeatable updates.
Like Now!
JAMB to consider only candidates with basic requirement for admissions - Registrar

How to Make a Digital Clock With JavaScript

Posted: 07 December, 2016 at 11:58 pm
How to Make a Digital Clock With JavaScript
How To Make A Digital Clock With JavaScript Photo 1

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 clock. Happy coding!

Add Your Comment

Recent Replies (0)

NEXT POST IN TIPS
World Clock

Lagos, Nigeria.

07:56 PM

Wasington D.C., USA.

02:56 PM

London, UK.

07:56 PM
End of Result