D3 Examples - html clock -- box

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html {
    margin: 0;
    font-family: "Helvetica";
    background: #26BFB0;
}
html, body, .board {
    width: 100%;
    height: 100%;
}
body {
    margin: 0 auto;
    max-width: 60em;
    position: relative;
}
.board {
    margin: auto;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: blue;
    position: relative;
    background: #3F4B59;
    z-index: 0;
}
.car {
    width: 16px;
    height: 16px;
    position: absolute;
    background: #F2CD5C;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    z-index: 1;
}
</style>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
​
    <section class="board">
        <div class="car"></div>
    </section>
​
<script>
    (function newClock() {
​
        var width = parseInt($('.board').width()),
            height = parseInt($('.board').height());
​
        var date = new Date();
​
        var left,
            right,
            top = ((date.getMinutes() + 1) / 60) * (height - 16) + "px";
​
        if (date.getMinutes() % 2 == 0) {
            left = ((date.getSeconds() + 1) / 60) * (width - 16) + "px";
            right = "auto";
        } else {
            left = "auto";
            right = ((date.getSeconds() + 1) / 60) * (width - 16) + "px";
        }
​
        $('.car').css("left", left).css("right", right).css("top", top);
​
        setTimeout(newClock, 1000);
​
    })()
</script>
​
    