Setelah pada tutorial jquery sebelumnya kita membahas cara membuat jam analog maka kali ini kita akan belajar tentang pembuatan jam digital dengan jquery. Nama plugins jquery ini adalah jqClock yang bisa di download secara gratis disini https://github.com/Lwangaman/jQuery-Clock-Plugin
Dalam plugin jqClock terdapat 2 file penting yaitu jqClock.min.js dan jqClock.css. Keduanya didukung oleh library utama jQuery (jquery.js). Berikut ini contoh penggunaanya :
Script Digital Clock
<!DOCTYPE html>
<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”>
Catatan : Script pada Live demo telah kami modding dengan tambahan bahasa Indonesia (“langSet”:”id”) agar berguna untuk diterapkan di website berbahasa Indonesia.
Terima kasih, Semoga Bermanfaat.
$(document).ready(function(){
$(“#jam”).clock({“format”:”24″,”calendar”:”false”});
});
</script>
</head>
<body>
<div id=”jam”></div>
</body>
</html>
Hasilnya :
Gambar 1 Digital clock
Apabila anda ingin mengubah tampilannya juga bisa, yaitu melalui file style-nya yang bernama jqClock.css , dan apabila Anda ingin menyertakan kalender dalam jam digital maka ubah script pada bagian :
$(“#jam”).clock({“format”:”24″,”calendar”:”false”});
Menjadi :
$(“#jam”).clock({“format”:”24″,”calendar”:”true”,”langSet”:”en”});
Hasilnya :
Gambar 2 Digital clock dengan Calendar
Penjelasan :
Set Calendar menjadi True atau “calendar”:”true” adalah fungsi untuk menampilkan calendar pada jam digital, sedangkan script “langSet”:”en” adalah berfungsi sebagai Language Setting yaitu Pengaturan Bahasa pada tampilan date (hari – tanggal – bulan – tahun). Disini saya coba setting English sehingga kodenya memakai “en”.
Perlu diketahui bahwa tersedia 6 bahasa beserta kodenya yaitu English (en), French (fr), Spanish (es), Italian (it), German (de), Russian (ru). Untuk bahasa Indonesia (id)? tenang saja karena saya telah tambahkan (modding).
Catatan : Script pada Live demo telah kami modding dengan tambahan bahasa Indonesia (“langSet”:”id”) agar berguna untuk diterapkan di website berbahasa Indonesia.
Terima kasih, Semoga Bermanfaat.
http://www.ilmugrafis.com/web-jquery.php?page=jam-digital-keren-dengan-jquery.
