website ilmugrafis
  Home
  Tutorials
  Fonts
  Gallery
  News
  Artikel
  Store
ilmugrafis
  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>

<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":"24","calendar":"false"});
});
</script>
</head>

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

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

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

download demo
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

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

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu percetakan di wilayah surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

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


Rekomendasi ilmugrafis

3DS MAX VRAY
Jasa Desain Grafis Terpercaya
Dapatkan jasa desain grafis berkualitas dari team ilmugrafis



Supported by ilmugrafis indonesia
 
ilmugrafis.com
Copyright © 2022 ilmuGrafis
Hak Cipta Dilindungi Undang - Undang
RSS 2.0 | Dmca | About Us