header ilmugrafis
Home Tutorials Fonts IG Store Contact
 
ilmu grafis » 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 perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ :
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com


Rekomendasi ilmugrafis

PHP 1
Pemrograman PHP

Video Tutorial Cara Membuat dan Memprogram Website Dinamis dengan PHP

DREAMWEAVER WEBDESIGN
Desain Website Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop

webmaster collection
Desain Website Dreamweaver 2

Dalam CD Tutorial ini diajarkan cara membuat website secara lebih detail dari seri sebelumnya



[adv.] Supported by
dumetschool kursus desain grafis
DumetSchool.com

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

BLENDER 3D
Blender Dasar

FOTOGRAFI
Lightroom

VECTOR
Adobe Illustrator

ANIMASI
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DESIGN
Dreamweaver
jQuery

PUBLISHING
InDesign
Ms. Paint

FREEWARE
Gimp
Inkscape

ARTS
News
Artikel
Gallery
Jasa Desain
Donasi

FRIENDS
Photoshop Desain
Hog Pictures

Link to us


bantuan information

ilmugrafis launcher
Privacy policy
Peta Situs | Term of Use web edukasi - ilmugrafis.com Indonesia
Copyright © 2017 ilmuGrafis. All Rights Reserved. | RSS | Subscribe
Hak Cipta Dilindungi Undang - Undang & Dmca
eXTReMe Tracker