Membuat jam klasik dengan jquery

Sebelumnya saya pernah posting tentang Pembuatan Jam Digital Menggunakan Css3 Dan Jquery sekarang saya pengen posting mengenai jam lagi tapi jam yang kali ini menggunakan tampilan jam klasik yang bundar itu lo nih screenshotnya

Yah Jadi inget masa lalu kalau liat jam - jam klasik seperti itu :D hemmm baiklah langsung saja anda simpan kode di bawah ini didalam gadget HTML/Javascript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(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);

});
</script>
<style type="text/css">
#clock {
    position: relative;
    width: 80px;
    height: 120px;
    margin: 20px auto 0 auto;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDcKwUtVdtjgKfpH2lAxbvq7LrX_z18fWWDilq8hQuhQoArl4XmjihaUrgpUJi18tLkiOmkO3_qp3QaXFbpQiPHeLrMGQWRUbpSahC-0BJSJziitsPhuVi0pWx7Axb8CIoECsDPTjMfc/s1600/clockface+copy.png)no-repeat;
    list-style: none
    }

#sec, #min, #hour {
    position: absolute;
    width: 6px;
    height: 120px;
    top: 2px;
    left: 57px
    }

#sec {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWPQGWBSQOLZIkhs0zCM2FwsnfsjB9HzUxH2YUNaZJldcVWsd5Xen3TOmfj9AGitiLrdDUAG8KQBYcPp4HdOa8lcIZN2n7AdGSLSG8bprLKEyBddhrW5bGY8VSAYruBeBtc4A3W2rFg4c/s1600/sechand.png);
    z-index: 3
    }

#min {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUIYRxvV7tvL2vX2-Wh04XIWUgX7OdUp0aF3EKshXKKhvDONvpZhIdi_N7o-Wo7O6L91pOXr3wXkLaEKWBX12YbwGL6tviRPcVTi-vBm_7BTR7xPrioBR-XDvT4HXTBtVvSoie4RTjvRs/s1600/minhand.png);
    z-index: 2
    }

#hour {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDUHpkGFAsx_J0p-ydxnLGc7bXRpGO4GKa1FkWrNzK2kNEtSkbca0ciOnr-ndzD9EUo8oApZNBCUN8re86jSrm7eBR6F34rl-HIo3t1DX-M7A86P1PqNnEmxmdHUfteRXem2Q6guFyJg0/s1600/hourhand.png);
    z-index: 1
    }
</style>
<ul id="clock"> 
     <li id="sec"></li>
     <li id="hour"></li>
  <li id="min"></li>
 </ul>

Jika kode yang bergaris bawah sudah ada di template anda jangan simpan lagi kode tersebut cukup kode dibawahnya saja :) semoga berguna