Membuat Jam Digital, itu yang awalnya ku pikirkan ketika mau posting di blogku ini. Belajar-belajar dan cari-cari tau dari internet wah lama banget dapat petunjuk cara buatnya (jam digital). Mumpung koneksi lagi lancar-lancarnya, yaaa santai ja dech. Akhirnya, pencarian menuju satu web yang emank membahas mengenai web. Bagus banget itu web (pikirku... halah laaaaahh!!)
Oke, dah cukup basa-basinya. Langsung aja kita praktekan apa yang telah aku dapat dari web W3Schools tadi, contoh yang aku dapatkan seperti ini.
wah awalnya aku copas script yang dari web ini, hasilnya ndak sesuai dengan yang ada ditampilkan di web itu (yaaa iyaaaaaaaaaaaaa lah) lah wong ra ono gambare. Haa...
Akhirnya belajar kreatif sedikit, nemu lah caranya... berhubung ndak ada gambar angka-angka yaa pakai teks aja. begini caranya :
Pertama, hapus aja array yang ada di script awal (num=new Array("0fdr.gif","1fdr.gif","2fdr.gif","3fdr.gif","4fdr.gif","5fdr.gif","6fdr.gif","7fdr.gif","8fdr.gif","9fdr.gif");) alasannya aku ndak punya gambar yang mau ditampilkan.
Kedua, ganti aja scirpt berikut :
if (hour<10)
{
document.getElementById('hour1').src=num[0];
h2="'" + hour + "'";
h2=h2.charAt(1);
document.getElementById('hour2').src=num[h2];
}
else
{
h1="'" + hour + "'";
h1=h1.charAt(1);
document.getElementById('hour1').src=num[h1];
h2="'" + hour + "'";
h2=h2.charAt(2);
document.getElementById('hour2').src=num[h2];
}
ganti dengan :
if (hour<10)
{
document.getElementById('hour').innerHTML = "0"+hour;
}
else
{
document.getElementById('hour').innerHTML = hour;
}
Cukup lebih simple dari yang contonya kan??heheheeeee.... Begitu juga pada bagian menit dan detik.
Ketiga, ganti script awal yang ada di body seperti bgcolor yang awalnya "#000000" (tu warna hitam), tapi jika anda ingin tetap warna hitam backgroundnya, biarkan aja asalkan teks yang untuk angka jamnya warna yang kontras dengan warna background yang anda pakai. Nah yang terpenting dalam menampilkan teks jamnya, ganti script awal berikut :
<body onload="showTime()" onunload="stopInterval()" bgcolor="#000000">
<img id="hour1" />
<img id="hour2" />
<img id="minute1" />
<img id="minute2" />
<img id="second1" />
<img id="second2" />
</body>
ganti dengan :
<body onLoad="showTime()" onUnload="stopInterval()">
<div id="hour" style="width:20px; float:left;"></div>
<div style="width:5px; float:left;">:</div>
<div id="minute" style="width:20px; float:left;"></div>
<div style="width:5px; float:left;">:</div>
<div id="second" style="width:20px; float:left;"></div>
</body>
Nah sekarang, simpan dan kemudian lihat hasilnya. Tampilan hasil yang telah aku coba seperti berikut ini.
Demikian yang bisa ku ceritakan bagaimana caranya membuat jam digital dengan menggunakan javascript (dengan mengubah sedikit dari script yang sudah diberikan oleh w3schools). Terima kasih udah mampir di blogku
tak bisa ny,,,
BalasHapusscript lengkap nya yang udah jadi aja posting kenapa......
tak bisanya kenapa ni?
HapusWah boleh dicoba nih gan, mantep lah kalau sumbernya w3school.
BalasHapussilahkan dicoba... iya w3schools mantep dijadikan pedoman, hehehheee
HapusTerima Kasih Atas tutorialnya .. artikel yang sangat bagus ..
BalasHapus