HTML5 Analog Clock

HTML5 adalah suatu spesifikasi yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Sebelumnya banyak orang menambahkan fitur-fitur baru di web browser atau pun di aplikasi komputer pada masa masanya HTML5 Kebawah. Solusi ini dikenal dengan plugin dan Flash. Standard HTML4 yang dilihat banyak kelemahan untuk support terhadap website yang interaktif membuat website-website yang migrasi ke HTML5 itu.

Tujuan dari pada suatu HTML5 tersebut adalah menyederhanakan serta memperbaiki kelemahan di versi HTML sebelumnya. Seperti pada Clock yang pada awalnya menggunakan Flash/Flash Player yang di install manual di komputer, tetapi karena sudah ada kehebatan dari HTML5 ini bisa di sederhanakan menjadi Script.

HTML5 Hanya bisa di lihat menggunakan web browser yang terkenal saat ini adalah GOOGLE CHROME atau Safari. Saya ambil contoh dan sekaligus berpapasan dengan judul postingan pada blog ini. Yaitu membuat Jam/Clock menggunakan HTML5


Analog Clock diatas adalah hasil karya dari paulrhayes dengan menggunakan HTML5 alias tidak menggunakan Flash Player. Saya ingatkan lagi bahwa Hanya bisa di lihat untuk browser tertentu, Sungguh menarik bukan? Sekarang tinggal gimana membuatnya.

1. Buka Blogger.com dengan Password dan ID
2. Pilih Layout → Page Element
3. Add a Gadget → pilih Javascript/HTML
4. Pada kotak javascript yang kosong isi dengan kode berikut :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://www.paulrhayes.com/experiments/clock/js/experiment.js"></script>

<style>
#clock {
position: relative;
width: 200px;
height: 200px;
background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnpSBG23dzzyxVCLlBZn_ywXGKLElj4byYD1gmUpTbPkakKn3NcR9IgOYJ55gfpPJvqxkcp3EBQQ6lQz6Skn6TkT1QLOiUl4s1Dg1EO2v51OTznMtkkdq1ngBjC67HB8pDY82TvVbO1oo/s1600/bg.png)no-repeat;
border-radius:200px;
border:2px solid #000;
box-shadow:inset 0 0 5px #ddd;
}
#clock div {
position: absolute;
}
#clock img[src*='second'] {
-webkit-transition: -webkit-transform 600000s linear;
-moz-transition: -moz-transform 600000s linear;
-o-transition: -o-transform 600000s linear;
}
#clock:target img[src*='second'] {
-webkit-transform: rotate(3600000deg);
-moz-transform: rotate(3600000deg);
-o-transform: rotate(3600000deg);
}
#clock img[src*='minute'] {
-webkit-transition: -webkit-transform 360000s linear;
-moz-transition: -moz-transform 360000s linear;
-o-transition: -o-transform 360000s linear;
}
#clock:target img[src*='minute'] {
-webkit-transform: rotate(36000deg);
-moz-transform: rotate(36000deg);
-o-transform: rotate(36000deg);
}
#clock img[src*='hour'] {
-webkit-transition: -webkit-transform 216000s linear;
-moz-transition: -moz-transform 216000s linear;
-o-transition: -o-transform 216000s linear;
}
#clock:target img[src*='hour'] {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
</style>



---


<div id="clock">
<div id="hour"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vTYqME-pX161hZMVspyi1m5Rk4MA-7LjhfY-Jg8epYNMKLHF7GZGoviXi1GpVJ1jk4U9hq238CD1KiE27tjywZ6lwyhRCzjXkOOfj5aHz0khxujhnKPgKGYJ00Xlna0u_adNKD-La0U/s400/hourHand.png" /></div>
<div id="minute"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI9yYp_0uUG8QvLh4npVlyB4cIxUnV0L0q_-85ERWW96xK6nuCxyO3Um_KKLux_XZm1GvxamgvtNr7qBEe3vJ-xpE8hw_t2pEPz2Nkezq2jF0ot4hAP6eht0s7CM0VwrOTdULj25Ow_KY/s400/minuteHand.png" /></div>
<div id="second"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilctqriUc2h7tGKBFT1N0QXvNC08nEVwFbRrbHC_HfOJmgyQN-qn1k6Pze1egmNmSfyoEydlwkUmmFTnTzVKOBPkbxET_8jlTlNxwAJDMHngGf1Xx5Prvwb1riGRksVZgTVq1K1Eh3J1Y/s400/secondHand.png" /></div>
</div>

5. Kemudian tambahkan lagi disitu Tombol Pengaktif Jamnya.

<a href="#clock">Klik Untuk Mengaktifkan Jam!</a>

6. Kemudian Save Gadget
7. Setelah jadi lihat hasilnya di GOOGLE CHROME atau SAFARI. Setelah itu klik Tombol Pengaktif Jamnya untuk mengaktifkan Jam.
8. Lihat hasilnya seperti contoh diatas

Lebih mudahnya menggunakan Iframe

<center><iframe src="http://html5analogclock.blogspot.com/#clock" width="204" height="204" scrolling="no" style="border:none"></iframe></center>

Jam tersebut akan mengikuti seluruh Hour, Minute, dan Second sesuai yang ada di komputer kita saat ini.