JSFiddle - React, Tailwind, and code Playground

Clock Face Small

by Jennifer Perrin

HTML

<div class="clockBlock">
    <ul id="clock">
        <li id="sec"></li>
        <li id="hour"></li>
        <li id="min"></li>
    </ul>
</div>

CSS

body { background: #ccc; }

.clockBlock {
    width: 100px;
    background: #ffffff;
    margin: 0 auto;
    padding: 5px;
    border: 3px solid #dddddd;
}
ul#clock li {
    border: medium none;
}
#clock {
    background: url("http://jennperrin.com/fiddles/clock/face3.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 100px;
    list-style: none outside none;
    margin: 0 auto 0;
    position: relative;
    width: 100px;
}
#sec, #min, #hour {
    height: 100px;
    left: 44px;
    position: absolute;
    top: 0;
    width: 10px;
}
#sec {
    background: url("http://jennperrin.com/fiddles/clock/second.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    overflow: hidden;
    z-index: 3;
}
#min {
    background: url("http://jennperrin.com/fiddles/clock/minute.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    z-index: 2;
}
#hour {
    background: url("http://jennperrin.com/fiddles/clock/hour.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    z-index: 1;
}

JavaScript

$(function () {
    setInterval(function () {
        var seconds = new Date().getSeconds();
        var sdegree = seconds * 6;
        var srotate = "rotate(" + sdegree + "deg)";
        $("#sec").css({
            "-moz-transform": srotate,
            "-webkit-transform": srotate
        });
    }, 1000);
    setInterval(function () {
        var hours = new Date().getHours();
        var mins = new Date().getMinutes();
        var hdegree = hours * 30 + (mins / 2);
        var hrotate = "rotate(" + hdegree + "deg)";
        $("#hour").css({
            "-moz-transform": hrotate,
            "-webkit-transform": hrotate
        });
    }, 1000);
    setInterval(function () {
        var mins = new Date().getMinutes();
        var mdegree = mins * 6;
        var mrotate = "rotate(" + mdegree + "deg)";
        $("#min").css({
            "-moz-transform": mrotate,
            "-webkit-transform": mrotate
        });
    }, 1000);
});