Membuat Jam Interaktif dengan JQuery


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

Komentar

Posting Komentar