Jam Digital Keren Dengan Jquery

0
188

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 :
digital-clock-calendar

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 :
digital-clock-calendar
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.

Leave a Reply