Membuat Jam Analog dengan Javascript

Bagi anda yang ingin mempercantik halaman website anda dengan menambahkan jam analog ini lah tutorial nya.

Ok langsung saja kita mulai unutk tutorial nya

persiapkan dulu amunisi nya
1. download dulu gambarnya

setelah gambar telah siap sekarang kita ketikan kode nya

pertama untuk kode html nya

<!-----------Kode HTML------------->
<ul id="clock">
<li id="sec"></li>
<li id="hour"></li>
<li id="min"></li>
</ul>

silakan tempatkan dimana saja kamu inginkan

kedua kode unutk cssnya

<!-----------Kode CSS-------------->
<style type="text/css">
/***********************************************
* Jam Analog dengan jQuery (c) Buku Catatan si Ugi code library (http://caprt3a.blogspot.com)
* Visit http://caprt3a.blogspot.com for more of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
#clock {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 50px auto 0 auto;
    background: url(Clock.png)no-repeat;
    list-style: none
    }

#sec, #min, #hour {
    position: absolute;
    width: 12px;
    height: 250px;
    top: 2px;
    left: 119px
    }

#sec {
    background: url(jQuery_second.png);
    z-index: 3
    }

#min {
    background: url(jQuery_minute.png);
    z-index: 2
    }

#hour {
    background: url(jQuery_hour.png);
    z-index: 1
    }
</style>

pastikan letak gambarnya

yang terakhir kode unutk javascriptnya

<!--------jQuery Jam Analog-------->
<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>

Related post: