<!-- Paste this code into the CSS section of your HTML document  -->

table.clock {
  text-align: center;
  border: thin dotted blue;
  padding: 5px;
  margin: auto;
}

td, input.clock2 {
  text-align: center;
  border: none;
  font: bold .9em verdana, helvetica, arial, sans-serif;
  padding-bottom: .5em;
}

.clock3 {
  text-align: center;
  font: .7em verdana, arial, helvetica, ms sans serif;
}



<!-- Paste this code into an external JavaScript file named: timeFormat.js  -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Sandeep Gangadharan :: http://www.sivamdesign.com/scripts/ */

function formatTime() {
  now = new Date();
  hour = now.getHours();
  min = now.getMinutes();
  sec = now.getSeconds();

  if (document.clock.sivamtime[0].checked) {
    if (min <= 9) {
      min = "0" + min;
    }
    if (sec <= 9) {
      sec = "0" + sec;
    }
    if (hour > 12) {
      hour = hour - 12;
      add = " p.m.";
    } else {
      hour = hour;
      add = " a.m.";
    }
    if (hour == 12) {
      add = " p.m.";
    }
    if (hour == 00) {
      hour = "12";
    }

    document.clock.sivam.value = ((hour<=9) ? "0" + hour : hour) + ":" + min + ":" + sec + add;
  }

  if (document.clock.sivamtime[1].checked) {
    if (min <= 9) {
      min = "0" + min; }
    if (sec <= 9) {
      sec = "0" + sec; }
    if (hour < 10) {
      hour = "0" + hour; }
    document.clock.sivam.value = hour + ':' + min + ':' + sec;
  }

  setTimeout("formatTime()", 1000);
}

window.onload=formatTime;



<!-- Paste this code into the HEAD section of your HTML document.
     You may need to change the path of the file.  --> <script type="text/javascript" src="timeFormat.js"></script> <!-- Paste this code into the BODY section of your HTML document  --> <form name="clock"> <table class="clock" width="135"> <tr> <td class="clock2">
    Local Time
  </td> </tr> <tr> <td> <input class="clock2" type="text" name="sivam" size="12"><br> </td> </tr> <tr> <td> <label class="clock3" for="1"><input type="radio" id="1" name="sivamtime" checked>12 Hour Format</label><br> <label class="clock3" for="2"><input type="radio" id="2" name="sivamtime">24 Hour Format</label> </td> </tr> </table> </form> <p><div align="center"> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </div><p>