html clock -- box

<!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>

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>

https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js