Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL: How To Make A Digtal Clock With Javascript
#1
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


Quote:
<!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-weight:bold;  

color:fff;  

text-align:center;  

font-size:16px;  

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 9jaspot.com
ALWAYS IN FEAR OF ALLAH


Possibly Related Threads...
Thread Author Replies Views Last Post
  SHARED: Introducing Hrouter.js Javascript Routing Library Horlahcoded 7 84 10-16-2017, 10:13 PM
Last Post: iamdannyfc
  SHARED: Introducing Hkwest.js Javascript Ajax Library Horlahcoded 0 37 10-15-2017, 09:46 AM
Last Post: Horlahcoded
  HELP: Javascript Vs Jquery. beme 10 296 08-21-2017, 07:20 AM
Last Post: beme
  Test Your Javascript Knowledge Dealwap 10 563 08-16-2017, 07:41 PM
Last Post: Thepreditor
  How Can I Submit A Form Using Javascript iamdannyfc 11 235 06-22-2017, 10:13 PM
Last Post: bfaschat
  TUTORIAL: Take A Selfie With Javascript SamBlingxZ 0 82 06-05-2017, 11:41 PM
Last Post: SamBlingxZ
  3 Types Of Javascript Animations That I So Much Admire! Laive 5 213 05-20-2017, 09:40 AM
Last Post: Laive
  HELP: How Can I Create A Javascript Ads Rotator For My Site Eddykul 5 219 03-30-2017, 09:51 AM
Last Post: Harsh
  Beginner Javascript Coding Mistakes To Avoid smartlord 2 258 02-08-2017, 04:04 PM
Last Post: smartlord
  Concatenate Many Arrays Uniquely With Javascript Dealwap 0 207 01-03-2017, 04:15 PM
Last Post: Dealwap



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

              Advertise