Minggu, 22 Januari 2012

Tutorial membuat jam dengan program HTML / Javascript

Published : 14.18 Author : Unknown

Tutorial membuat jam dengan program HTML / Javascript

Supaya makin lengkap artikel di blog ini, kali ini saya bikin tutorial mengenai membuat program jam dengan HTML / Javascript. Sebenarnya tidak sulit untuk membuat program ini, dengan beberapa baris kode sederhana saja, kita dapat membuat program ini berjalan baik. Ada 2 cara yang saya kemukakan disini, yang pertama saya ambil dari suatu situs tutorial javascript :

1. Saya beri nama file clockscript

<script language="JavaScript">

<!--
// please keep these lines on when you copy the source
// made by: Nicolas - http://www.javascript-page.com

var clockID = 0;

function UpdateClock() {
   if(clockID) {
      clearTimeout(clockID);
      clockID  = 0;
   }

   var tDate = new Date();

   document.theClock.theTime.value = "" 
                                   + tDate.getHours() + ":" 
                                   + tDate.getMinutes() + ":" 
                                   + tDate.getSeconds();

   clockID = setTimeout("UpdateClock()", 1000);
}
function StartClock() {
   clockID = setTimeout("UpdateClock()", 500);
}

function KillClock() {
   if(clockID) {
      clearTimeout(clockID);
      clockID  = 0;
   }
}

//-->

</script>
<body onload="StartClock()" onunload="KillClock()">
<center><form name="theClock">
<input type=text name="theTime" size=8>
<form></center>

2. dan yang satunya lagi saya sederhanakan dengan cara berbeda. Saya beri nama file ini iframeclock

<html>

<head>
<meta http-equiv=refresh content=1>
</head>

<body>

<script type="text/javascript">

var tDate = new Date();
document.write(tDate.getHours() + ":"  + tDate.getMinutes() + ":" + tDate.getSeconds());

</script>

</body>

</html>

kode HTML untuk tutorial yang kedua ini menggunakan META REFRESH yang harus diselipkan di antara tags HEAD,jadi, saya set program akan merefresh browser setiap 1 detik. Selain itu, tutorial kedua ini juga harus diletakkan didalam [I}FRAME. Keuntungan file iframeclock ini adalah lebih portabel dibandingkan dengan file yang pertama (scriptclock) , dan tidak akan saling mengganggu antara program utama dengan script jam ini.