Live Clock - jQuery

Solomon Chijioke - JavaScript

HTML

<script src="http://fonts.googleapis.com/css?family=Orbitron"></script>
<!-- 
@Author:  Solomon Chijioke Jeffrey(Software Engineer)
@Use:     HTML5
@Date:    Copyright 2011
@Design:  Style
-->




<div id="clock"></div>

CSS

/* 
@Author:  Solomon Chijioke Jeffrey(Software Engineer)
@Use:     Live Clock Design CSS
@Date:    Copyright 2011
@Design:  Style
*/

* {
   margin: 0;
   padding: 0;
}

body {
   background-color: #026873;
}

div#clock {
   position: relative;
   /* childs are abs. positionned */
   display: block;
   width: 130px;
   height: 130px;
   /* keep square */
   border-radius: 50%;
   /* All round */
   margin: 20px auto;
   /* as you want, or float left */
   transition: all 250ms linear;
   /* for mouseover effect */
   -webkit-transition: all 250ms linear;
   -moz-transition: all 250ms linear;
   -ms-transition: all 250ms linear;
   -o-transition: all 250ms linear;
   background: #FFF;
   background: rgba(255, 255, 255, 0.16);
   background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%);
   background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0.16)));
   background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%);
   background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%);
   background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#29000000', GradientType=0);
}

div#clock:hover {
   transform: scale(1.3);
   -moz-transform: scale(1.3);
   -webkit-transform: scale(1.3);
   -ms-transform: scale(1.3);
   -o-transform: scale(1.3);
}

div.innerCenter {
   position: absolute;
   z-index: 0;
   top: 50%;
   left: 50%;
   width: 94px;
   height: 94px;
   /* diameter */
   margin: -47px 0 0 -47px;
   /* centered with half diameter */
   border-radius: 50%;
   box-shadow: 0 0 3px rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.2);
  ...

JavaScript

/* 
@Author:   Solomon Chijioke Jeffrey (Software Engineer)
@Use:      Custom Javascript for the Live Clock
@Date:     Copyright 2011
@Design:   Custom Javascript
*/
(function($) {
   Number.prototype.padTime = function() {
      return (this < 10 ? '0' + this : this);
   };

   $.fn.extend({ // Extend jQuery with custom plugin

      rotate: function(degree) { // Cross browser rotate
         return this.each(function() {
            var rotate = 'rotate(' + degree + 'deg)';
            return $(this).css({
               '-moz-transform': rotate,
               '-webkit-transform': rotate,
               '-ms-transform': rotate,
               '-o-transform': rotate,
               transform: rotate
            });
         });
      },
      analogueClock: function(options) { // Analogue Clock plugin

         options = $.extend({ // Default values
            withHours: true, // Print digit time ?
            withDigitalTime: true, // Print time (digital) in center
            digitBoxWidth: 20 // div.digit width : cf. css
         }, options || {});

         return this.each(function() {
            var $clock = $(this);

            // Built analog digits number
            if (options.withHours) {
               var plotsNum = 12, // 12 hours digits, normally ^^
                  increase = Math.PI * 2 / plotsNum, // cheeseCake
                  angle = -(increase * 3), // rotate midnight at top
                  clockCenter = parseInt($clock.innerWidth(), 10) / 2 - (options.digitBoxWidth / 2),
                  digitsHtml = '';
               for (var i = 0; i < plotsNum; i++) {
                  var x = clockCenter * Math.cos(angle) + clockCenter,
                     y = clockCenter * Math.sin(angle) + clockCenter;
                  digitsHtml += '<div class="digit" style="left:' + x + 'px;top:' + y + 'px;">' +
                     (i % 3 == 0 ? '<span>' + (i == 0 ? plotsNum : i) + '</span>' : i) + '</div>';
                  angle += increase;
       ...