Jam Digital Ala Jquery (Dynamic)

Alhamdulilah yah, sudah sekian lama akhirnya saya kembali juga untuk memposting artikel baru, semoga ilmu yang ingin saya bagikan kepada sahabat semua dapat bermanfaat, baiklah langsung saja kita ke pokok pembahasan.

saya begitu penasaran dengan sebuah situs diinternet yang menampilkan jam digital secara dinamis, karna selama ini saya menggunakannya secara statis (statis itu detik dari jam tidak berdetak, sedangkan dinamis sebaliknya). kemudian saya mencari2 ilmu kesan kemari, bertapa siang dan malam, akhirnya saya mendapat 1 penglihatan (hahaha, ngarang nih). untuk mendetakkan sebuah jam digital ternyata bisa menggunakan banyak cara, selain menggunakan flash, ajax, dan jquery. tetapi disini saya akan menjelaskan 2 hal saja (klo kebanyakan pasti bingung ntar sahabat semua). ok langsung saja….

pertama saya akan menjelaskan bagaimana ajax dapat membuat sebuah jam digital berdetak, perhatikan script berikut ini :

  1. Buat dulu script dengan nama jam.php
    <?php
               date_default_timezone_set("Asia/Jakarta");
               $jam = date("H:i:s");
               echo "$jam WIB";
    ?>
  2. Hasilnya ketika anda run dibrowser anda akan terlihat seperti ini :
    23:23:42 WIB
  3. Selanjutnya kita buat ajaxnya :
    <html>
    <head>
    <script language="javascript">
    var XMLHttpRequestObject = false;
    if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    function getJam(sumberdata, divID) {
      if(XMLHttpRequestObject) {
        var obj = document.getElementById(divID);
        XMLHttpRequestObject.open("GET",sumberdata);
        XMLHttpRequestObject.onreadystatechange = function() {
          if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
            obj.innerHTML = XMLHttpRequestObject.responseText;
            setTimeout("getJam('jam.php','divjam')",1000);
          }
        }
      XMLHttpRequestObject.send(null);
      }
    }
    window.onload=function(){
    setTimeout("getJam('jam.php','divjam')",1000);
    }
    </script>
    </head>
    <body>
    <div style="width: 250px;" align="center">
    <div id="divjam"></div>
    </div>
    </body>
    </html>
  4. Maka hasilnya ketika jam_ajax.php di run, jam akan berdetak

Selain menggunakan script ajax diatas anda juga bisa menggunakan script jquery, lebih simple ga bribet seperti diatas.

    1. Pertama download dulu script jquery di website resminya disini
    2. Setelah mendownload buat script berikut :
      <html>
      <head>
      <link rel="stylesheet" href="main.css" type="text/css" />
      <script src="jquery-1.6.4.js"></script>
      <script>
        $(document).ready(function() {
          setInterval(function() {
               $('#divjam').load('jam.php?acak='+ Math.random());
          }, 1000);
        });
      </script>
      </head>
      <body>
      <div style="width: 250px;" align="center">
      <div id="divjam"></div>
      </div>
      </body>
      </html>
    3. Kemudian jalankan, secara tampilan tidak ada yang berbeda dengan script ajax diatas, namun jquery dapat memangkas script jauh lebih sedikit dibanding script dengan ajax, hal ini sangat sesuai dengan motto daripada jquery yaitu “ The Write Less, Do More
Bagi teman-teman yang ingin menaruh maupun menyalin artikel ini ke blog maupun media elektronik lainya, harap mencantumkan sumbernya, gunakan etika berinternet, terima kasih. Salam ivonidiego

About ivonidiego
You = What You Do

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: