« »

Display the local time in the 12 hour or 24 hour format. Selection is made by the visitor using the radio buttons displayed with the clock.

Label: 12/24 Hour Format Clock

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
table.clock {
  text-align: center;
  border: thin dotted blue;
  padding: 5px;
  margin: auto;
}

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

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

</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="javascript">
// 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);
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<body onload=formatTime()><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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->