Javascript Clock

In this snippet, we will go through javascript code of a javscript clock that shows the current client time without requiring the user to reload the page.

Javascript Clock Demo

6:04:22 PM (This is not real but its format of clock)

Javascript Clock Code:

 

<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>

Declare the above javascript clock function in the head of the page.

Now, use the javascript clock within the div id ("clock") below where ever you want to show the clock.

<div id="clock"> 
<script language="javascript">
<!--
 clock();
 //-->
 </script>
</div>

People who read this post also read :

If you liked my post then,

Subscribe to this site via Email:

Click here to Subscribe to FREE email updates from "itrickz", so that you do not miss out anything that can be valuable to you and your blog!!