D3 Examples - html clock analog

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html {
        width: 100%;
        margin: 0;
        font-family: "Helvetica";
    }
    body {
        max-width: 60em;
        margin: 2em auto;
        position: relative;
    }
    .backward-clock {
        width: 40em;
        margin: auto;
    }
    .face {
        width: 41em;
        height: 41em;
        background: white;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        position: relative;
        background: white;
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    }
    .hand {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 1em;
        width: 100%;
        position: absolute;
        top: 20em;
        left: 0;
    }
    .center {
        position: absolute;
        top: 19em;
        left: 19em;
        width: 3em;
        height: 3em;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: blue;
        z-index: 3;
    }
    span {
        position: absolute;
        height: 100%;
        left: 50%;
        top: 0;
        -moz-border-radius: 1em;
        -webkit-border-radius: 1em;
        border-radius: 1em;
    }
    .second span {
        width: 40%;
    }
    .minute span {
        width: 35%;
    }
    .hour span {
        width: 30%;
    }
    .second {
        z-index: 2;
    }
    .minute {
        z-index: 1;
    }
    .hour {
        z-index: 0;
    }
</style>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<section class="backward-clock">
    <div class="face">
        <div class="hand second"><span></span></div>
        <div class="hand minute"><span></span></div>
        <div class="hand hour"><span></span></div>
        <div class="center"></div>
    </div>
</section>
​
<script>
    (function newClock() {
​
        var colorRange =
            //["rgb(252, 251, 253)", "rgb(63, 0, 125)"]; //purple
            //["rgb(247, 251, 255)", "rgb(8, 48, 107)"]; //blue
            ["rgb(247, 252, 245)", "rgb(0, 68, 27)"]; //green
            //["rgb(255, 255, 255)", "rgb(0, 0, 0)"]; //grays
            //["rgb(247, 252, 253)", "rgb(0, 68, 27)"]; //blue to green
​
        $('body').css("background", colorRange[0]);
        $('.center').css("background", colorRange[1]);
​
        var date = new Date();
​
        var minutesDeg = date.getMinutes() / 60 * 360 - 90;
        var secondsDeg = date.getSeconds() / 60 * 360 - 90;
        var hoursDeg = date.getHours() > 12 ? (date.getHours() / 12) * 360 - 90 : ((date.getHours() - 12) / 12) * 360 - 90;
​
        var colorSeconds = d3.scale.linear().domain([0, 59]).range(colorRange),
            colorMinutes = d3.scale.linear().domain([0, 59]).range(colorRange),
            colorHours = d3.scale.linear().domain([0, 12]).range(colorRange);
​
        $('.hour').css( 'transform', 'rotate(' + hoursDeg + 'deg)' ).children().css("background", colorSeconds(date.getHours()));
        $('.minute').css( 'transform', 'rotate(' + minutesDeg + 'deg)' ).children().css("background", colorSeconds(date.getMinutes()));
        $('.second').css( 'transform', 'rotate(' + secondsDeg + 'deg)' ).children().css("background", colorSeconds(date.getSeconds()));
​
        setTimeout(newClock, 1000);
    })()
</script>
​
    