CSS3 Circles Clock

by AndreaLigios

HTML

<div class="clock h">
     <div class="hold"><div class="ring" id="hour"></div></div>
     <div class="hold half2"><div class="ring" id="hours"></div></div>
     <div class="display" id="dH" data-hours=0>00</div>
</div>
<div class="clock m">
     <div class="hold"><div class="ring" id="min"></div></div>
     <div class="hold half2"><div class="ring" id="mins"></div></div>
     <div class="display" id="dM" data-minutes=0>00</div>
</div>
<div class="clock s">
     <div class="hold"><div class="ring" id="sec"></div></div>
     <div class="hold half2"><div class="ring" id="secs"></div></div>
     <div class="display" id="dS" data-seconds=0>00</div>
</div>

CSS

body {
    padding: 8px;
}
.clock {

    float: left;
    margin-right: 40px;
}
.display {
    background-color: white;
    position: relative;
    top: 16px;
    left: 16px;
    width: 128px;
    height: 128px;
    border-radius: 64px;
    text-align: center;
    line-height: 128px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:60px;
    text-shadow:4px 4px 5px #ccc;
}
.ring {
    background-color: #2f2;
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 80px;
    clip: rect(0px, 80px, 160px, 0px);
}
.m .ring {
    background-color: #26a;
}
.h .ring {
    background-color: #f30;
}
.hold {
    background-color: #eee;
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 80px;
    clip: rect(0px, 160px, 160px, 80px);
}
.half2 {
    transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}

JavaScript

function pad(num) {
    return ( num < 10 ? "0" : "" ) + num;
}

function increment() {
    var time = new Date();
    var secs = time.getSeconds();
    var mins = time.getMinutes();
    var hours = time.getHours();

    $('#dS').data('seconds',secs);
    $('#dM').data('minutes',mins);
    $('#dH').data('hours',hours);
    $('#dS').text(pad(secs));
    $('#dM').text(pad(mins));
    $('#dH').text(pad(hours));

    var deg = secs * 6;
    if (deg < 180) {
        $("#sec").css('transform','rotate('+deg+'deg)');
        $("#secs").css('transform','rotate(0deg)');
    } else {
        $("#sec").css('transform','rotate(180deg)');
        $("#secs").css('transform','rotate('+(deg-180)+'deg)');
    }
    var degM = mins * 6;
    if (degM < 180) {
        $("#min").css('transform','rotate('+degM+'deg)');
        $("#mins").css('transform','rotate(0deg)');
    } else {
        $("#min").css('transform','rotate(180deg)');
        $("#mins").css('transform','rotate('+(degM-180)+'deg)');
    }
    var degH = hours * 15;
    if (degH < 180) {
        $("#hour").css('transform','rotate('+degH+'deg)');
        $("#hours").css('transform','rotate(0deg)');
    } else {
        $("#hour").css('transform','rotate(180deg)');
        $("#hours").css('transform','rotate('+(degH-180)+'deg)');
    }
}

setInterval(function(){increment()}, 1000);