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
Ketiga buatlah file dengan nama jam_jquery.php
Contoh Skrip Download
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 ini telah dihapus oleh pengarang.
BalasHapusmakasih telah berkunjung.... trus berkreasi dan berinovasi.
HapusLink Downloadnya error tuh Pak.
HapusMakasih
nice. thank you :)
BalasHapusreally helpful . Thanks Pak :)
BalasHapus