JS/CSS Clock

by moob

HTML

<div id="clock">
    <div id="dot"></div>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div id="milwrap"><div id="mil"></div></div>
</div>

CSS

body {background:#fff;}
#clock {
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    -webkit-backface-visibility: hidden;
    border:2px solid #aaa;
}

#dot, #mil, #sec, #min, #hour, #milwrap {
    background: black;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 50%;
    margin: auto;
    -webkit-transform-origin: center bottom;
    -webkit-transform: rotate(0deg);
}

#dot {
    width: 3%;
    height: 3%;
    background: #fff;
    z-index: 12;
    bottom:0;
    top:0;
    border-radius:50%;
    border:3px solid rgb(150,5,20);
}

#milwrap {
    background: rgba(0,0,0,.1);
    border:1px solid #666;
    border-radius:50%;
    height:25%;
    width:25%;
    bottom:10%;
}

#mil {
    width: 1px;
    height: 45%;
    background: #222;
    z-index: 4;
}

#sec {
    width: 1%;
    height: 54%;
    background: rgb(150,5,20);
    z-index: 10;
    /*border-radius: 50%/30%;*/
    -webkit-transform-origin: center 90%;
    bottom:45%;
}

#min {
    width: 2%;
    height: 45%;
    background: rgb(90,90,90);
    z-index: 8;
    /*border-radius: 45%/10%;*/
}

#hour {
    width: 4%;
    height: 42%;
    background: rgb(50,50,50);
    z-index: 6;
    /*border-radius: 45%/10%;*/
}

JavaScript

//use requestAnimationFrame for smoothness (shimmed with setTimeout fallback)
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){window.setTimeout(callback, 1000 / 60);};
})();

//initialize the clock in an IIFE
(function clock(){ 
    var hour = document.getElementById("hour"),
        min = document.getElementById("min"),
        sec = document.getElementById("sec"),
        mil = document.getElementById("mil");
    //set up a loop
    (function loop(){
        draw();
        requestAnimFrame(loop);
    })();
    //position the hands
    function draw(){
        var now = new Date(),//now
            then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight
            diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds
            h = (diffInMil/(1000*60*60)),//hours
            m = (h*60),//minutes
            s = (m*60),//seconds
      		l = (s*60);//milliseconds
        //rotate the hands accordingly
        sec.style.webkitTransform = "rotate(" + (s * 6) + "deg)";
        hour.style.webkitTransform = "rotate(" + (h * 30 + (h / 2)) + "deg)";
        min.style.webkitTransform = "rotate(" + (m * 6) + "deg)";      
        mil.style.webkitTransform = "rotate(" + (l*6) + "deg)";
    } 
})();