D3 Examples - html clock

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html {
        width: 100%;
        margin: 0;
        font-family: "Helvetica";
    }
    body {
        width: 60em;
        margin: 2em auto;
        background: steelblue;
        position: relative;
    }
    .datediv {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        border:1px solid white;
        margin: auto;
    }
    .time {
        margin-bottom: 1em;
        position: relative;
        width: 100%;
    }
    .date {
        margin: 1em 0;
        position: relative;
    }
</style>
<!--  -->
    <body>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
​
        <section class="time">
            <div class="datediv second"></div>
            <div class="datediv minute"></div>
            <div class="datediv hour"></div>
        </section>
​
        <section class="date">
            <div class="datediv day"></div>
            <div class="datediv month"></div>
        </section>
​
        <script>
        (function newClock() {
​
            var date = new Date();
​
            var maxDays =  new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
            var hours = ((date.getHours() / 24) * 50) + 10;
            var minutes = (date.getMinutes() / 60) * hours;
            var seconds = (date.getSeconds() / 60) * minutes;
​
            var months = (((date.getMonth() + 1) / 12) * 50) + 10;
            var days = (date.getDate() / maxDays) * months;
​
            $('.second').css("width", seconds + "em").css("height", seconds + "em");
            $('.minute').css("width", minutes + "em").css("height", minutes + "em");
            $('.hour').css("width", hours + "em").css("height", hours + "em");
            $('.time').css("height", hours + "em");
​
            $('.day').css("width", days + "em").css("height", days + "em");
            $('.month').css("width", months + "em").css("height", months + "em");
            $('.date').css("height", months + "em");
​
            setTimeout(newClock, 1000);
        })()
        </script>
​
    