index.html

<div class="clock">
      <div class="hours"></div><!--
   --><div class="minutes"></div><!--
    --><div class="seconds"></div><!--
    --><div class="twelvehr"></div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

jQuery-Digital-Clock.markdown

jQuery Digital Clock

A Pen by Nick Mkrtchyan on CodePen.

License.

script.js

var $document = $(document);
(function () { 
  var clock = function () {
      clearTimeout(timer);
    
      date = new Date();    
      hours = date.getHours();
      minutes = date.getMinutes();
      seconds = date.getSeconds();
      dd = (hours >= 12) ? 'pm' : 'am';
      
    hours = (hours > 12) ? (hours - 12) : hours
      
      var timer = setTimeout(clock, 1000);
    
    $('.hours').html('<p>' + Math.floor(hours) + ':</p>');
    $('.minutes').html('<p>' + Math.floor(minutes) + ':</p>');
    $('.seconds').html('<p>' + Math.floor(seconds) + '</p>');
      $('.twelvehr').html('<p>' + dd + '</p>');
  };
  clock();
})();

(function () {
  $document.bind('contextmenu', function (e) {
    e.preventDefault();
  });  
})();

style.css

@font-face {
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

body {
  background:lightyellow;
  -webkit-user-select: none;
  font-family: 'Electrolize';
  font-size:40px;
  color:white;
}
.clock {
  position:absolute;
  top:30%;left:40%;
  box-shadow:0 0 500px red;
  background-color: #292929;
  width:300px;
  height:50px;
  margin:auto;
  padding:30px;
}
.clock div{
  margin-top:-40px;
  display:inline-block;
  width:25%;
  height: 10%;
  text-align: center;
}