Membuat Jam Analog dengan jQuery | Buku Catatan si Ugi

Seperti halnya sebuah Jam Analog yang diciptakan dengan CSS3, dimana jam tersebut dapat ditampilkan pada sebuah blog atau halaman website yang dapat menampilkan waktu real Time.

Jam Analog kali ini diciptakan dengan menggunakan jQuery. Dalam hal penampilan, Jam Analog ini tidak jauh berbeda dengan Jam Analog yang diciptakan dengan CSS3. Mungkin hanya mekanismenya saja yang membedakannya, dimana jQuery diperlukan untuk memanggil dan menjalankan animasi.

Demo Jam Analog :




Berikut ini adalah satu paket gambar yang digunakan untuk membuat Jam Analog:

hour.png         minute.png         second.png         Clock.png

Untuk background gambar, anda dapat menggunakan beberapa contoh background berikut ini:


Untuk Paket Gambar, anda dapat Download paketgambar.zip disini, dengan cara klik kanan kemudian "Save Link As..."

Implementasi :
Berikut ini adalah Kode lengkap untuk membuat Jam Analog, Silahkan letakan kode tersebut kedalam tag <body> atau dimanapun anda ingin menampilkannya pada halaman website anda, dengan cara "Add Gadget", "Add HTML/JavaScript" kemudian letakan "Kode Lengkap Jam Analog" kedalamnya dan simpan.
Kode Lengkap Jam Analog :
<!-----------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>

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

<!--------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>
Keterangan :
Sebelum memasang "Kode Lengkap Jam Analog" ini, terlebih dahulu upload atau (hosting) paket gambar yang sudah anda Download sebelumnya kedalam server anda, kemudian letakan URL-URL gambar tersebut seperti contoh pada (text warna merah)sesuai dengan nama gambar.

Selesai.




0 komentar:

Post a Comment



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan