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
  SHARED: Introducing Hbot.js Javascript Ai Library Horlahcoded 3 147 11-08-2017, 10:13 AM
Last Post: Horlahcoded
  SHARED: Introducing Hrouter.js Javascript Routing Library Horlahcoded 7 112 10-16-2017, 10:13 PM
Last Post: iamdannyfc
  SHARED: Introducing Hkwest.js Javascript Ajax Library Horlahcoded 0 55 10-15-2017, 09:46 AM
Last Post: Horlahcoded
  HELP: Javascript Vs Jquery. beme 10 316 08-21-2017, 07:20 AM
Last Post: beme
  Test Your Javascript Knowledge Dealwap 10 595 08-16-2017, 07:41 PM
Last Post: Thepreditor
  How Can I Submit A Form Using Javascript iamdannyfc 11 263 06-22-2017, 10:13 PM
Last Post: bfaschat
  TUTORIAL: Take A Selfie With Javascript SamBlingxZ 0 94 06-05-2017, 11:41 PM
Last Post: SamBlingxZ
  3 Types Of Javascript Animations That I So Much Admire! Laive 5 230 05-20-2017, 09:40 AM
Last Post: Laive
  HELP: How Can I Create A Javascript Ads Rotator For My Site Eddykul 5 234 03-30-2017, 09:51 AM
Last Post: Harsh
  Beginner Javascript Coding Mistakes To Avoid smartlord 2 268 02-08-2017, 04:04 PM
Last Post: smartlord

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