Skip to main content

Real Time Digital Clock in Javascript


Introduction:
This tutorial is on how to create a real time digital clock in Javascript.

HTML Template:
Before we can create a javascript clock, we need a basic HTML template file. Here's a basic html, head, body layout...

  1. <head>
  2.  
  3. </head>
  4. <body>
  5.  
  6. </body>
  7. </html>

onLoad Listener:
Javascript has an inbuilt listener called 'onLoad' which can be added to the 'body' HTML tag of our HTML template file which will run the parsed function once the page loads, we can use this to initiate our clock...

  1. <body onload="startClock(); setInterval('startClock()', 1000 )">

The above code means the 'startClock' function will be ran, then it will be ran every 1000ms (1 second), to update the clock properly.

startClock Function:
So now once our page loads, the onload listener will start the 'startClock' javascript function. At least, it would if it existed; let's create it now.

First we create the basic function block, like so...

  1. function startClock() {
  2.  
  3. }

It does not take any parameters as they are not needed.

Next we get the current date, and extract current hours, minutes and seconds from that date...

  1. function updateClock()
  2. {
  3. var currentTime = new Date ( );
  4. var currentHours = currentTime.getHours ( );
  5. var currentMinutes = currentTime.getMinutes ( );
  6. var currentSeconds = currentTime.getSeconds ( );
  7. }

Now we want to add any appropriate zeros to our seconds and minutes texts. We also append the 'AM' or 'PM' text on to the end of the text too...

  1. function updateClock()
  2. {
  3. var currentTime = new Date ( );
  4. var currentHours = currentTime.getHours ( );
  5. var currentMinutes = currentTime.getMinutes ( );
  6. var currentSeconds = currentTime.getSeconds ( );
  7. currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  8. currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
  9. var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
  10. }

Finally we fix up any bugs that could stop our clock from correctly displaying zero and twelve, and get the time ready to display. We set the contents of a paragraph tag(s) with the id of 'clock' to the current clock time...

  1. function updateClock()
  2. {
  3. var currentTime = new Date ( );
  4. var currentHours = currentTime.getHours ( );
  5. var currentMinutes = currentTime.getMinutes ( );
  6. var currentSeconds = currentTime.getSeconds ( );
  7. // Pad the minutes and seconds with leading zeros, if required
  8. currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  9. currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
  10. // Choose either "AM" or "PM" as appropriate
  11. var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
  12. // Convert the hours component to 12-hour format if needed
  13. currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
  14. // Convert an hours component of "0" to "12"
  15. currentHours = ( currentHours == 0 ) ? 12 : currentHours;
  16. // Compose the string for display
  17. var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
  18. // Update the time display
  19. document.getElementById("clock").firstChild.nodeValue = currentTimeString;
  20. }

Clock P:
Finally we want to add the clock paragraph to our body, in order for the time to display on our page...

  1. <p id='clock'>timeHere</p>

Full Source:
Here is the full page source code...




timeHere



Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.