TUTORIAL

Cara Membuat Jam Digital dengan Jquery

シックス , TUTORIAL
0
10685

Setelah sebelumnya saya membahas Cara Membuat Jam Analog Dengan Jquery, sekarang saya akan mencoba sharing tutorial membuat Jam digital dengan Jquery. Cara nya sama kita memnggunakan Framework  jQuery v1.8.2 yang bisa didownload disitus resmi www.jquery.com. JQuery merupakan suatu framework (library) Javascript yang menekankan interaksi antara Javascript dan HTML.

 

JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.

Untuk membuat jam digital Pertama, kita harus menyertakan (include) file library JQuery dengan CSS (Cascading Style Sheet) yang biasanya sudah jadi satu saat kita mendownloadnya. Pastikan letak dari file library sudah benar yang biasanya diletakkan dibawah </title> struktur HTML. 

Berikut ini adalah tampilan CSS nya:

.jqclock { float:left; text-align:center; border: 1px Black solid; background: LightYellow; padding: 10px; margin:20px; }
  .clockdate { color: DarkRed; margin-bottom: 10px; font-size: 18px; display: block;}
  .clocktime { border: 2px inset White; background: Black; padding: 5px; font-size: 14px; font-family: "Courier"; color: LightGreen; margin: 2px; display: block; }

  

Setelah itu meletakkan CSS dan file library Jquery kedalam struktur 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>

Kemudian selanjutnya adalah proses inisialisasi perintah artinya mendefinisikan action yang terjadi saat link dengan class=show dan perhatikan pula nama class dari masing-masing object.

 

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

Dari koding diatas akan menampilkan tampilan jam seperti dibawah :

Berikut kami share link download Source Codenya :

 

DOWNLOAD »  

0 Comments

×