JavaScript Clock

This is a simple JavaScript clock that will display the current time in either a 24-Hour format or a 12-Hour format. Lets first look at the Javascript, and do not worry if it confusing to you at first we will break down each part of it.

                  
  <script language="JavaScript">
  function checklength(i){
         if (i<10){
          i="0"+i;}
          return i;
  }
  function clock(){
    var now = new Date();
    var hours = checklength(now.getHours());
    var minutes = checklength(now.getMinutes());
    var seconds = checklength(now.getSeconds());
    var format = 1;  //0=24 hour format, 1=12 hour format
    var time;

    if (format == 1){
      if (hours >= 12){
        if (hours ==12){
          hours = 12;
        }else {
          hours = hours-12;
        }
       time=hours+':'+minutes+':'+seconds+' PM';
      }else if(hours < 12){
           if (hours ==0){
             hours=12;
           }
       time=hours+':'+minutes+':'+seconds+' AM';
      }
    }
   if (format == 0){
      time= hours+':'+minutes+':'+seconds;
   }
   document.getElementById("clock").innerHTML=time;
   setTimeout("clock();", 500);
  }
 </script>

Just by looking at the code, you see we have two functions, one called checklength, and the other called clock. Lets take a deeper look into the checklength function.

The function checklength is very short, and only does one thing. This function checks to make for sure that the vaule passed to it, is two charcters. It does it by checking the value and seeing it if is less then 10. If the value is less then 10, we then pad that value with a 0. We do this to make the clock look more appealing because when we used the JavaScript function getHours(), getMintutes(), and getSeconds() anything under 10 returns a single character value.

Now on to the heart of this scripts code, the clock function. Lets look at this function a little closer.

In this section of the script we are declearing the varibles that we will need to use. First we declear the varible now, and set the value to be the current date, by using the Javascript Date() function. The next three varible, we set up the hours, minutes, and seconds, using the built in Javascript function to return the values of each. We are also passing the values returned from the Javascript function to the checklength function we create. This will make the value two digits long no matter what value is returned in the Javascript function. The next varible we have come across is the format varible, and a comment. In the comment it tells us that if we want the clock to be displayed in a 24-hour format, we will set the value of format to 0. If we want to use a 12-hour format for the clock, we will set the value to 1. The last varible we declear is time. This will be used later in the function, and is used when displaying the clock in our HTML code.

Here is where the confusion starts, if we look at each if statement one line at a time it will not be so confusing.

Just by looking at the code, you see we have two functions, one called checklength, and the other called clock. Lets take a deeper look into the checklength function.

The first if statement is checking to see what the value of format is. If it is set to 1 (to display the time in 12-hour format), then it continues to the next if statement. In our example script, the format is equal to one, so the script goes into the if statement.

Now that we are inside the first if else statement, we come to another if else statment. This statement is checking the value of hours, and if hours is greater then or equal to 12, the script advances to the next step. In the next step, the script has to check hours again to see if it is equal to 12. If hours does equal 12, then we set the value of hours to 12. Else if hours equals anything other then 12, the script then sets the value of hours to whatever the current value of hours subtracted by 12. Now, we set the varible time based on the values of each varible at this time. We are also fomating the output by adding colons where needed, and adding PM at the end, since we know that the time is after noon.

The second part of the first if statement, we are checking to see if hours is less then 12. If the value of hours is less then 12, we then check to see if hours is equal to 0, and if so, we set hours to 12. We have to do this since getHours(), returns the hour in 24-hour format and we would like the format to be in 12-hour format, and midnight would be 00:00, but in the 12-hour format we need it to be displayed as 12:00. Like if else that checked if the time was past noon, we set the value of time to the varibles that have been set and add a AM, since it is before noon.

The other if statement in this section is very straight foward, and is very simple.

This if statement just checks the format value, just like the first one, but if format is equal to 0 we set the value of time to the current time in a 24-hour format.

The next part of the code is to display the varible time, and a function that is a timer for the clock() function.

The document.getElementById("clock").innerHTML will allow us to display our clock in either a div or span tag with the id to set to clock. Without the setTimeout() function, our clock will just display the time the user first visits the site. This function allows the time to update as the user is on the page. Now let's look at our very short HTML code, and a short JavaScript code that is in it.

Code-Sucks.com

JavaScript Clock