Membuat Jam Interaktif dengan Ajax

Pada tutorial kali ini saya akan membuat jam interaktif dengan Ajax.
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_ajax.php

<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<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 class="demo" style="width: 250px;" align="center">
<div id="divjam"> </div>
</div>
</body>
</html>

Deddy Rusdiansyah,M.Kom

Cari Blog Ini

Membuat Jam Interaktif dengan Ajax

Komentar

Posting Komentar