Tutorial jQuery | Belajar Javascript Query

NAVIGASI MENU :
TUTORIAL > JQUERY

Jam Digital Keren dengan JQuery

Publish: 16 Juli 2014 | Author & Copyright: Johan | Status: FREE tutorial jQuery

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>

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).

Silahkan lihat Live demonya beserta Download File Latihannya Gratis dengan tambahan pengaturan Indonesia "langSet":"id" :

Live Demo Digital Clock

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.

Share URL

Share the URL of this Tutorial in IM, Email or post in forums

http://www.ilmugrafis.com/web-jquery.php?page=jam-digital-keren-dengan-jquery

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai desain grafis. Saat ini bekerja sebagai freelancer designer grafis
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Email : johan.felisitas[at]gmail[dot]com

Rekomendasi ilmugrafis

Jasa Desain Grafis Terpercaya
Dapatkan jasa desain grafis berkualitas dari team ilmugrafis

Supported by ilmugrafis indonesia

Kembali Ke Atas