با استفاده از این پلاگین جی کوئری می توانید یک ساعت 24 ساعته آنالوگ ایجاد کنید
آموزش استفاده
1. فراخوانی کتابخانهjquery
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="knob.js"></script> <script type="text/javascript" src="style.js"></script>
2.کد html جهت استفاده پلاگین و کد های اجرایی جی کوئری
<body style="color:#EEE;background:#222;" >
<div style="position:relative;width:350px;margin:auto">
<div style="position:absolute;left:10px;top:10px">
<input class="knob hour" data-readOnly="true" data-min="0" data-max="24" data-bgColor="#333" data-fgColor="#ffec03" data-displayInput="false" data-width="350" data-height="350" data-thickness=".25">
</div>
<div style="position:absolute;left:60px;top:60px">
<input class="knob minute" data-readOnly="true" data-min="0" data-max="60" data-bgColor="#333" data-displayInput="false" data-width="250" data-height="250" data-thickness=".35">
</div>
<div style="position:absolute;left:110px;top:110px">
<input class="knob second" data-readOnly="true" data-min="0" data-max="60" data-bgColor="#333" data-fgColor="rgb(127, 255, 0)" data-displayInput="false" data-width="150" data-height="150" data-thickness=".2">
</div>
</div>
<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>
</body>
نکته این ساعت 24 ساعته است