12 Hour Clock in javascript

by Faisal Khan Janjua

HTML

<div class="digitalClock"><div id="fHours"></div>:<div id="fMins"></div>:<div id="fSecs"></div> <div id="fAmPm"></div></div>

CSS

.digitalClock {
  display: block;
  font-size: 52px;
}
.digitalClock > div {
  color: #333;
  background: #99f;
  padding: 8px 16px;
  display: inline-block;
  font-family: monospace;
  vertical-align: middle;
}

JavaScript

function clock(){
  var now = new Date();
  var hour = now.getHours();
  var min = now.getMinutes();
  var sec = now.getSeconds();
  var mid = 'am';

  if (sec < 10) { sec = "0" + sec; }
  if (min < 10) { min = "0" + min; }
  if (hour > 12) { 
    mid = 'pm';
    hour = hour - 12;
  }
  if(hour==0){ hour=12; }
  if (hour < 10) { hour = "0" +hour; }

  document.getElementById("fHours").innerHTML = hour;
  document.getElementById("fMins").innerHTML = min;
  document.getElementById("fSecs").innerHTML = sec;
  document.getElementById("fAmPm").innerHTML = mid;
  
  setTimeout(clock, 1000);
}clock();