Membuat Jam Analog dengan jQuery
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:
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>
<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