Simple jquery & CSS3 analogue clock

by secretgspot

HTML

<link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css">

<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>

CSS

* { margin: 0; padding: 0; }
body { background-color: #026873; }

/* ------- 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 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 );
    /* box-shadow:inset 0 0 3px rgba(255,255,255,0.3), inset 0 0 10px rgba(255,255,255,0.3);
        -moz-box-shadow:inset 0 0 3px rgba(255,255,255,0.3), inset 0 0 10px rgba(255,255,255,0.3);
        -webkit-box-shadow:inset 0 0 3px rgba(255,255,255,0.3), inset 0 0 10px rgba(255,255,255,0.3);
        -ms-box-shadow:inset 0 0 3px rgba(255,255,255,0.3), inset 0 0 10px rgba(255,255,255,0.3);
        -o-box-shadow:inset 0 0 3px rgba(255,255,255,0.3), inset 0 0 10px rgba(255,255,255,0.3);*/
    }
    div#clock:hover {
        transform:scale(1.3);
            -moz-transform:scale(1.3);
           ...

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