jam digital

Tips Menampilkan Jam Digital pada Halaman Web Pada kesempatan kali ini saya akan memberikan sebuat tutorial bagaimana menampilkan jam digital pada halaman web. Jam digital yang saya maksudkan disini adalah jam online yang tampil di halaman web dan waktunya berjalan otomatis, seperti jam tangan kita gitcu loo..!!, bedanya mungkin kalo jam tangan kalo kena air bisa mati tapi kalo jam online kena air gak mati, kecuali komputer anda tercebur ke kolam.. hehehe Seperti yang kita tahu bahwa menampilan jam digital online tidak bisa dibuat dengan PHP karena script PHP bekerja dengan mengambil nilai variabel yang sangat bergantung pada event user misalnya klik atau refresh browser. Kalo menampilkan waktu sekarang dengan PHP sih bisa tapi kalo kayak digital berjalan PHP nggak bisa, ternyata PHP masih ada kurangnya juga ya. Oleh karenanya kali ini kita akan membuat Jam Digital dengan Java Script. Ok langsung saja berikut ini adalah source code untuk membuat jam digital sederhana. <html> <head> <title>Jam Digital</title> <script type="text/javascript"> / /mendeklarasikan v ariabel var pijaronline; //membuat fungsi function waktu() { pijaronline = setTimeout( "waktu()", 1000 ); waktuku = new Date(); // Mengambil Nilai Waktu jam = waktuku.getHours(); menit = waktuku.getMinutes(); detik = waktuku.getSecon ds(); // Mengatur format waktu if (jam < 10) jam = "0" + jam; if (menit < 10) menit = "0" + me nit; if (detik < 10 ) detik = " 0" + detik; // Mengambil dan mengatur v ariabel untuk content document.getElementBy Id("multazam").innerHTML = jam+":"+menit+":"+detik; } </script> </head> <body onload="waktu();"> <table align="center" background="back ground.gif"> <tr><td width="100" align="center"> <strong><font face="Arial" color="#000000" id="multazam"></font></strong> </td></tr>

Upload: den-sukardi

Post on 12-Jul-2015

496 views

Category:

Documents

0 download

Report

Download

Embed Size (px):

TRANSCRIPT

5/11/2018 Jam Digital - slidepdf.com

http://slidepdf.com/reader/full/jam-digital-55a232f66e4a1 1/3

Tips Menampilkan Jam Digitalpada Halaman Web

Pada kesempatan kali ini saya akan memberikan sebuat tutorial bagaimana menampilkan jamdigital pada halaman web. Jam digital yang saya maksudkan disini adalah jam online yang

tampil di halaman web dan waktunya berjalan otomatis, seperti jam tangan kita gitcu loo..!!,bedanya mungkin kalo jam tangan kalo kena air bisa mati tapi kalo jam online kena air gakmati, kecuali komputer anda tercebur ke kolam.. hehehe

Seperti yang kita tahu bahwa menampilan jam digital online tidak bisa dibuat dengan PHPkarena script PHP bekerja dengan mengambil nilai variabel yang sangat bergantung padaevent user misalnya klik atau refresh browser. Kalo menampilkan waktu sekarang denganPHP sih bisa tapi kalo kayak digital berjalan PHP nggak bisa, ternyata PHP masih adakurangnya juga ya.Oleh karenanya kali ini kita akan membuat Jam Digital dengan Java Script. Ok langsung sajaberikut ini adalah source code untuk membuat jam digital sederhana.

<html><head><title>Jam Digital</title><script type="text/javascript">

/ /mendeklarasikan variabelvar pijaronline;

//membuat fungsi

function waktu() {pijaronline = setTimeout( "waktu()", 1000 );waktuku = new Date();

// Mengambil Nilai Waktujam = waktuku.getHours();menit = waktuku.getMinutes();detik = waktuku.getSeconds();

// Mengatur format waktuif (jam < 10) jam = "0" + jam;

if (menit < 10) menit = "0" + menit;if (detik < 10) detik = "0" + detik;

// Mengambil dan mengatur variabel untuk contentdocument.getElementById("multazam").innerHTML = jam+":"+menit+":"+detik;}

</script></head><body onload="waktu();">

</td></tr>

5/11/2018 Jam Digital - slidepdf.com

http://slidepdf.com/reader/full/jam-digital-55a232f66e4a1 2/3

</table></body></html>

Dari script di atas dapat disimpulkan ada 6 langkah utama membuat jam digital

dengan Java Script yaitu : Mendeklarasikan variabel, membuat fungsi, mengambilnilai waktu (jam, menit dan detik), mengatur format waktu, mengatur nilai contentdan menampilkan jam digital di halaman web.

Oh ya, untuk menampilan jam dengan tampilan yang lebih baik kita bisamemberikan background atau mengatur melalui CSS. Semoga tutorial ini bermanfaatdan sampai ketemu di tutorial selanjutnyaPenulis,

Muh. Multazam

Website : www.pijaronline.comwww.belajarilmukomputer.com

Email : [email protected]. 081805727985

http://www.pijaronline.com/

http://www.belajarilmukomputer.com/

mailto:[email protected]

http://www.belajarilmukomputer.com/

mailto:[email protected]

http://www.pijaronline.com/