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
[-] The following 2 users Like Badooskid's post:
  • Aphatheology, Voski
Facebook Share


Possibly Related Threads...
Thread
  Beginner Javascript Coding Mistakes To Avoid
  Concatenate Many Arrays Uniquely With Javascript
  Javascript Time Ago Function
  Shortest Code For Random Number Between 1 And N In Javascript
  Javascript Text Editor Right In Your Browser In One Line Of Code
  Getting Current Location With Javascript
  How To Check If Javascript Object Is Empty
  How To Create An Image Slider With Javascript
  Convert Numbers To Roman Numerals With Javascript
  Remove All Falsy Values From An Array With Javascript




Users browsing this thread: 1 Guest(s)