Color Wheel Clock

You must run this in Chrome or Safari

by Dan Shahin

HTML

<script src="http://fonts.googleapis.com/css?family=Sigmar+One"></script>
<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>
<div class="swatch hour">hour</div>
<div class="swatch minute">minute</div>
<div class="swatch second">second</div>

CSS

body{
    font-family : Arial;
}
.hand {
    
    position : absolute;
    
    width:0px;
    
    opacity : 0.5;
    
}

.swatch {
    
    height: 150vh;
    
    width:33vw;
    
    color: black;
    
    float: left;
    
    font-size:12vw;
    
    color: white;
    
    text-align: center;
    
}

.num {
    
    position : absolute;
    
    font-weight: bolder;
    text-shadow:
        6px 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.1),
        1px 1px 3px rgba(0,0,0,.3),
        3px 3px 5px rgba(0,0,0,.2),
        5px 5px 10px rgba(0,0,0,.25),
        10px 10px 10px rgba(0,0,0,.2),
        20px 20px 20px rgba(0,0,0,.15);
    
}

#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 white;
    
    border-radius : 300px;
    
}

JavaScript

$(function () {
    var second = $("#second");
    var minute = $("#minute");
    var hour = $("#hour");
    var $clock = $('#clock');
    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++) {
        var colorAngle = ((i + 1) * step12) - 90
        console.log(colorAngle)
        $("<div>", {
            "class": "num",
            css: {
                left: 145 + 120 * Math.cos(angle),
                top: 145 + 120 * Math.sin(angle),
                color: 'hsla(' + colorAngle + ',100%,60%,1)'
            },
            text: i + 1
        }).appendTo("#clock");
        //console.log(100 * Math.cos(angle));
        angle += step;
    }



    updateTime();
    setInterval(updateTime, 500);

    function updateTime() {
        var time = new Date();
        var secs = time.getSeconds(),
            newSecs = secs * step60 - 90;
        //console.log(time.getSeconds());
        var mins = time.getMinutes(),
            minDegrees = mins * step60 - 90;
        var hours = time.getHours(),
            hourDegrees = hours % 60 * step12 - 90;
        var saturation = '100%';
        if (hours > 12){
           //hours = hours -12; 
            saturation = '50%';
        }

        second.css({
            webkitTransform: "rotateZ(" + newSecs + "deg)",
                'border-right-color': hsla(newSecs,saturation,'50%',1)
        });
        $('div.second').css({
            'background-color': hsla(newSecs,saturation,'50%',1)
        }).text(secs);
        minute.css({
            webkitTransform: "rotateZ(" + minDegrees + "deg)",
                'border-right-color': hsla(minDegrees,saturation,'50%',1)
        });
        $('div.minute').css({
            'background-color': hsla(minDegrees,saturation,'50%',1)
        }).text(mins);
        hour.css({
            webkitTransform: "rotateZ(" + hourDegrees + "deg)",
                
                'border-right-color':...