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.

tags:

membuat jam dengan html

Hot Threads

Permalink:

Berlangganan artikel harian via e-mail :
 

Javascript Tips Comments 7 May 12th, 2007

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

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

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

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

    gak benar loe kasih codenya!!!

  3. 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

  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. 3
    kimyong Says:
    July 18th, 2007 at 3:57 pm

    friend,

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

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

    BOSS NGAK JALAN NICH PROGRAMNYA

    UDAH CAPEK NYOBANYA

  7. 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…..

Leave a Reply

«
»