clock

by brico

HTML

<div id="clock">
    <div id="hand"></div>
</div>
<div id="digital">0</div>

<input type="range" id="time"
    min="0" max="60" value="0" step="1"
    />

CSS

#clock {
    width: 50px;
    height: 50px;
    background: #ddd;
    position: relative;
    overflow: hidden;
}
#hand {
    width: 2px;
    height: 50px;
    background: black;
    position: relative;
    margin: 0 auto;
    -webkit-transform:rotate(0deg);
}

JavaScript

$('#time').change(function () {
    var time = this.value,
        degrees = time * 6;
    $('#digital').text(time);
    $('#hand').css('-webkit-transform', 'rotate(' + degrees + 'deg)');
});