Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL: How To Make A Digtal Clock With Javascript
Hello NCT Coders
I Come Across A Tutorial On How To Make A Digtal 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 th e clock interface s ome little styles, so we have to use CSS.  

*/#clk  { padding:16px;  background:#000;  





font-family:Arial,san s-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!!!  

Happy Christmas!!!

Source from

Possibly Related Threads...
Thread Author Replies Views Last Post
  HELP: Pls What Are The Major Uses Of Javascript Broomboss 18 330 03-17-2018, 10:17 PM
Last Post: Broomboss
  TUTORIAL: Take A Selfie With Javascript SamBlingxZ 1 162 01-23-2018, 08:46 PM
Last Post: Broomboss
  SHARED: Introducing Hbot.js Javascript Ai Library Horlahcoded 3 225 11-08-2017, 10:13 AM
Last Post: Horlahcoded
  SHARED: Introducing Hrouter.js Javascript Routing Library Horlahcoded 7 167 10-16-2017, 10:13 PM
Last Post: iamdannyfc
  SHARED: Introducing Hkwest.js Javascript Ajax Library Horlahcoded 0 96 10-15-2017, 09:46 AM
Last Post: Horlahcoded
  HELP: Javascript Vs Jquery. beme 10 399 08-21-2017, 07:20 AM
Last Post: beme
  Test Your Javascript Knowledge dealwap 10 631 08-16-2017, 07:41 PM
Last Post: Thepreditor
  How Can I Submit A Form Using Javascript iamdannyfc 11 311 06-22-2017, 10:13 PM
Last Post: bfaschat
  3 Types Of Javascript Animations That I So Much Admire! Laive 5 274 05-20-2017, 09:40 AM
Last Post: Laive
  HELP: How Can I Create A Javascript Ads Rotator For My Site Eddykul 5 274 03-30-2017, 09:51 AM
Last Post: Harsh

Users browsing this thread: 1 Guest(s)

About Nigeria's Creative Talents

Nigeria's Creative Talents is an online community where every creative Nigerians can share ideas with themselves.

For any more information, please use our contact form.

              User Links