Tampilan Jam Menggunakan JQuery

Setelah membaca sekilat tentang JQuery ternyata tampilan yang dihasilkannya sungguh menakjubkan. Sebagai contoh awal saya akan menampilkan jam digital maupun analog menggunakan JQuery.
Seperti halnya jam pada umumnya, tampilan jam menggunakan JQuery menampilkan waktu secara realtime dengan acuan waktu yang ada di komputer dimana aplikasi tersebut di jalankan.

Contoh Gambar Jam Digital

Contoh Gambar Jam Analog

Untuk contoh Coding jam analog bisa dilihat di bawah ini

<html>

<head>

<title>CoolClock Demo</title>

<script src="jquery.js"></script>

<script src="excanvas.js"></script>

<script src="coolclock.js"></script>

<script src="moreskins.js"></script>

<style type="text/css">

body { font-family:sans-serif; }

div { padding-bottom:1em; }

</style>

</head>

<body>

<canvas style="width: 400px; height: 400px;" height="400" width="400" id="_coolclock_auto_id_0" class="CoolClock:Cold"></canvas>

</body>

</html>

Pada baris 14 terdapat kata kata class="CoolClock:Cold" yang menunjukkan tampilan / skin jam yang akan digunakan. Pada contoh diatas tampilan yang digunakan menggunakan Cold, selain menggunakan Cold bisa juga menggunakan swissRail, chunkySwiss, chunkySwissOnBlack, atapun juga fancy dan masih banyak skin yang lain.
Untuk skin lengkapnya bisa dilihat di file moreskins.js yang bisa anda download di file lengkap contoh project di disini

Sedangkan untuk contoh Conding jam digital bisa dilihat dibawah ini

<html>

<head>

<title>Digital Clock</title>

<link rel="stylesheet" type="text/css" href="jqClock.css" />

<script src="jquery.js"></script>

<script src="jqClock.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#jam").clock({"format":"12","calendar":"true"});

});

</script>

</head>

<body>

<div id="jam"></div>

</body>

</html>

Pada baris ke 12 terdapat angka 12 yang merupakan format jam yang akan ditampilkan yaitu menggunakan 12 jam, apabila angka 12 diganti menjadi 24 maka tampilan jam akan berubah menjadi 24 jam.

Selain itu juga pada baris ke 12 terdapat kata kata calender : true itu menunjukkan bahwa tampilan jam digital juga menampilkan Kalender, apabila kata true diganti menjadi false maka kalender tidak akan tampil.

Untuk merubah format kalender bisa dibuka di file jqClock.min.js yang bisa didownload di project lengkap disini

Catatan Sederhana

Monday, August 5, 2013

Tampilan Jam Menggunakan JQuery

No comments:

Post a Comment