x

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.

Baca Juga:

Artikel Terkini

Tags: php tutorial load function,html: membuat jam,javascript untuk membuat jam-jam yang berbeda,html javascript,

Javascript Tips Comments 7 May 12th, 2007

Berlangganan artikel harian via e-mail :
 

7 Responses to “Tutorial membuat jam dengan program HTML / Javascript”

  1. 1
    Kevin Alfonzo Says:
    June 29th, 2007 at 3:03 pm

    Hallo, salam kenal dari kevin.

    Boleh khan aku kasih komentar atas trick ini…?

    Begini….

    aku dah uji coba trik pada artikel ini, tapi kok kayaknya ngak berhasil. Apa sebelum artikel ini di tulis, anda sudah melakukan uji coba dulu terhadap script tersebut.

    Aku mencobanya pake Internet Explorer.

    Untuk file “clockscript”, outputnya hanya berupa form kosong saja, sedangkan untuk yang “iframeclock” belum saya uji.

    Mohon penjelasannya…

    tyhank you…..

  2. 2
    Mr 1211 Says:
    July 18th, 2007 at 7:28 am

    BOSS NGAK JALAN NICH PROGRAMNYA

    UDAH CAPEK NYOBANYA

  3. 3
    kimyong Says:
    July 18th, 2007 at 3:57 pm

    friend,

    coba hapus tanda petiknya (tanda quote) semuanya .. tanda seperti ini “” .. pokoknya habisin saja

  4. 4
    NUNUK Says:
    October 31st, 2007 at 2:42 am

    AKU ADLH SISWA YANG BARU BELAJAR HTML.SO TOLONG KIRIM KE ALAMAT EMAILKU TENTANG HTML.TERIMAKASIH.

  5. 5
    ehemm.. Says:
    July 8th, 2008 at 7:27 am

    huahaha mantap bro! trima kasih bs bntu kami dlm creator html sii..ip tenan! thanks

  6. 6
    eradsdasd Says:
    November 14th, 2009 at 7:14 pm

    gak benar loe kasih codenya!!!

  7. 7
    kimyong Says:
    November 15th, 2009 at 3:56 pm

    coba lagi bro.. saya lupakan tambahkan code <pre&/gt;

Leave a Reply