Analog Clock

You must run this in Chrome or Safari

HTML

<div id="clock">
      <div id="minute" class="hand"></div>
      <div id="hour" class="hand"></div>
      <div id="second" class="hand"></div>
      <div id="center"></div>
    </div>

CSS

.hand {
        position : absolute;
        width:0px;
        opacity : 0.5;
      }
      .num{
        position : absolute;
      }
      #minute{
        top : 145px;
        left : 0px;
        height : 10px;
        border-left :150px solid transparent;
        border-right:150px solid black;
      }
      #hour{
        top : 140px;
        left : 50px;
        height : 20px;
        border-right:100px solid black;
        border-left :100px solid transparent;
      }
      #second{
        top : 148px;
        left : 0px;
        height : 4px;
        border-left :150px solid transparent;
        border-right:150px solid black;
      }
      #center{
        position : absolute;
        left : 140px;
        top : 140px;
        width : 20px;
        height : 20px;
        border-radius : 10px;
        background-color : black;
      }
      #clock{
        position : relative;
        margin-left : auto;
        margin-right : auto;
        width : 300px;
        height : 300px;
        border : 1px solid black;
        border-radius : 300px;
        
      }

JavaScript

$(function() {
    var second = $("#second");
    var minute = $("#minute");
    var hour = $("#hour");
    var step120 = 360 / 120;
    var step60 = 360 / 60;
    var step12 = 360 / 12;
    var step = (Math.PI * 2) / 12;
    var angle = -step * 2;
    for (var i = 0; i < 12; i++) {
        $("<div>", {
            "class": "num",
            css: {
                left: 145 + 120 * Math.cos(angle),
                top: 145 + 120 * Math.sin(angle)
            },
            text: i + 1
        }).appendTo("#clock");
        // console.log(100 * Math.cos(angle));
        angle += step;
    }

    updateTime();
    setInterval(updateTime, 250);

    function updateTime() {
        var time = new Date();
        var mils = time.getMilliseconds() * step120 - 90; console.log(mils);
        var secs = time.getSeconds() * step60 - 90;
        var mins = time.getMinutes() * step60 - 90;
        var hours = time.getHours() % 12 * step12 - 90;
        second.css({
            webkitTransform: "rotateZ(" + mils + "deg)"
        });
        minute.css({
            webkitTransform: "rotateZ(" + mins + "deg)"
        });
        hour.css({
            webkitTransform: "rotateZ(" + hours + "deg)"
        });
    }
});