Simple jquery & CSS3 analogue clock

by mori57

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Orbitron"></script>
<link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css">

<div class="container">
    <div id="clock">
        <!--// /* PLUGIN BUILD THIS */ <div class="digit" style="left:56px;top:0px;"><span>12</span></div>
    <div class="digit" style="left:84px;top:7.50px;">1</div>
    /* ...12 digits... */
    <div class="sec" style="-webkit-transform:rotate(246deg);"><div class="clockwise"></div></div>
    <div class="min" style="-webkit-transform:rotate(270deg);"><div class="clockwise"></div></div>
    <div class="hour" style="-webkit-transform:rotate(412.5deg);"><div class="clockwise"></div></div>
    <div class="time">13:45:41</div>
    <div class="innerCenter"></div>
    //--></div>
    <div id="time">
        <p class="capt">Feels like:</p>
         <h1 id="feelslike">10:00am</h1>

        <p class="capt">RealTime:</p>
         <h3 id="realtime">3:00pm</h3>

    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #026873;
}
.container {
    width:480px;
    margin: 0 auto;
}
/* ------- Clock container ------ */
 div#clock {
    position:relative;
    /* childs are abs. positionned */
    display:block;
    width:130px;
    height:130px;
    /* keep square */
    border-radius:50%;
    /* All round */
    margin:20px 5% 0 5%;
    /* as you want, or float left */
    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: -moz-radial-gradient(center, ellipse cover, rgba(216, 224, 222, 0) 0%, rgba(130, 157, 152, 0) 40%, rgba(100, 120, 117, 0) 51%, rgba(97, 117, 114, 0.8) 52%, rgba(14, 14, 14, 0.93) 83%, rgba(78, 92, 90, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(216, 224, 222, 0)), color-stop(40%, rgba(130, 157, 152, 0)), color-stop(51%, rgba(100, 120, 117, 0)), color-stop(52%, rgba(97, 117, 114, 0.8)), color-stop(83%, rgba(14, 14, 14, 0.93)), color-stop(100%, rgba(78, 92, 90, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(216, 224, 222, 0) 0%, rgba(130, 157, 152, 0) 40%, rgba(100, 120, 117, 0) 51%, rgba(97, 117, 114, 0.8) 52%, rgba(14, 14, 14, 0.93) 83%, rgba(78, 92, 90, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(216, 224, 222, 0) 0%, rgba(130, 157, 152, 0) 40%, rgba(100, 120, 117, 0) 51%, rgba(97, 117, 114, 0.8) 52%, rgba(14, 14, 14, 0.93) 83%, rgba(78, 92, 90, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(216, 224, 222, 0) 0%, rgba(130, 157, 152, 0) 40%, rgba(100, 120, 117, 0) 51%, rgba(97, 117, 114, 0.8) 52%, rgba(14, 14, 14, 0.93) 83%, rgba(78, 92, 90, 1) 100%);
    background: radial-gradient(ellipse at...

JavaScript

// Pixel polished jQuery & CSS3 analogue clock
// by [email protected] 08/10/2011
// Infos : http://www.b2bweb.fr/molokoloco/pixels-polished-jquery-css3-analogue-clock/

(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 +...