Home » » Membuat jam dengan program HTML / Javascript

Membuat jam dengan program HTML / Javascript

Hasna | 20.38 | 0 komentar

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.

Share this article :

0 komentar:

Posting Komentar

Popular Posts

 
Support : Copyright © 2011. Galeri -Q - All Rights Reserved
Proudly powered by Blogger