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... 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... 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... 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... 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... 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... Clock P: Finally we want to add the clock paragraph to our body, in order for the time to display on our page... Full Source: Here is the full page source code...

timeHere