<script>

function clock() {

var $s = $(".second"),

$m = $(".minute"),

$h = $(".hour");

d = new Date(),

s = d.getSeconds(),

m = d.getMinutes(),

h = d.getHours();

$s.val(s).trigger("change");

$m.val(m).trigger("change");

$h.val(h).trigger("change");

setTimeout("clock()", 1000);

}

clock();

</script>

<div class="demo" style="color:#EEE;background:#222;height:420px;width:100%">

<p>&#215; Superpose (clock)</p>

<div style="position:relative;width:350px;margin:auto">

<div style="position:absolute;left:10px;top:10px">

<input class="knob hour" data-min="0" data-max="24" data-bgColor="#333" data-fgColor="#ffec03" data-displayInput=false data-width="300" data-height="300" data-thickness=".3">

</div>

<div style="position:absolute;left:60px;top:60px">

<input class="knob minute" data-min="0" data-max="60" data-bgColor="#333" data-displayInput=false data-width="200" data-height="200" data-thickness=".45">

</div>

<div style="position:absolute;left:110px;top:110px">

<input class="knob second" data-min="0" data-max="60" data-bgColor="#333" data-fgColor="rgb(127, 255, 0)" data-displayInput=false data-width="100" data-height="100" data-thickness=".3">

</div>

</div>

</div>

<div style="clear:both"></div>