Membuat Jam Interaktif dengan JQuery

September 13, 2012

Pada tutorial kali ini saya akan membuat jam interaktif dengan JQuery, yang sebelumnya membuat jam dengan ajax, coba Anda bedakan kelebihan dan kekurangan dari kedua script tersebut.
Pertama buatlah file dengan nama main.css

body{
 font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 background-color:#fff;
 color:#333;
 font-size:16px;
 padding-left:10px;
 padding-bottom:30px;
 line-height: 150%;
}
input, select, textarea{
 border:1px solid #CCCCCC;
 padding: 5px;
 font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size:12px;
}
input.blur {
 color: #999;
}
.demo{
 border:solid 1px #ccc;
 background-color:#def;
 padding:10px
}


form div {
 padding: 4px 4px 4px 4px;
}
label {
 float: left;
 width: 100px;
}

Kedua buatlah file dengan nama jam.php

<?php
   date_default_timezone_set("Asia/Jakarta");
   $jam = date("H:i:s"); 
   echo "$jam WIB";
?>

Ketiga buatlah file dengan nama jam_jquery.php

<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<script src="jquery-1.4.js"></script>
<script language = "javascript">
  $(document).ready(function() {
    setInterval(function() {
      $('#divjam').load('jam.php?acak='+ Math.random());
    }, 1000);
  });
</script>
</head>
<body>
<div class="demo" style="width: 250px;" align="center">
<div id="divjam"> </div>
</div>
</body>
</html>

Contoh Skrip Download