Sederhana tapi menakjubkan. Seperti itulah gambaran yang akan terasa ketika menulis beberapa skrip jam digital dengan javascript ini. Untuk melakukannya tidak sulit setelah mengetahui dasar-dasarnya.
Yang pertama harus diketahui, manajemen waktu Javascript dilakukan dengan membuat objek instansi class Date. Setelah dibuat, serangkaian method dapat digunakan dari objek tersebut. Untuk membuat jam sederhana, ada 3 method yang perlu diketahui, yaitu getHours(), getMinutes() dan getSeconds(). Saya rasa, tidak perlu lah saya menjelaskan satu per satu, bahasanya cukup sederhana untuk dimengerti kan?
<script type='text/javascript'> function reformat(s){ if(s < 10) s = "0" + s; return s; } function updateJam() { var sekarang = new Date(); var j = reformat(sekarang.getHours()); var m = reformat(sekarang.getMinutes()); var d = reformat(sekarang.getSeconds()); document.getElementById('jam').innerHTML = j + ":" + m + ":" + d; var t = setTimeout(updateJam, 500); } </script>
...
<div onclick='updateJam();' id='jam'>00:00:00</div>
Fungsi updateJam() bertugas menulis waktu saat ini ke salah satu elemen dengan id "jam". Di akhir, fungsi ini memuat timer, yang akan mengeksekusi fungsi ini kembali setelah berlalu 0.5 detik. Fungsi ini terpanggil dan mengupdate waktu kembali beserta membuat timer baru. Begitu seterusnya, sehingga fungsi ini tidak akan pernah berhenti bekerja sejak dieksekusi pertama kali.
Waktu yang dihasilkan oleh objek Date masih dalam bentuk angka biasa. Agar angka di bawah 10 memiliki awalan 0, kita membuat fungsi sederhana untuk memodifikasi nilainya, yaitu dengan reformat().
Lalu kapan eksekusi pertama yang dimaksud?
Tepat! yaitu saat elemen ber-id jam diklik. Ini sesuai dengan kode di dalam atribut onclick di atas. Jika anda ingin kode ini dieksekusi otomatis saat halaman web di load. Tempatkan kode yang sama di atribut onload miliki elemen body.
<body onload='updateJam();'>
Sebagai contoh, saya sudah memasukkan script dan elemen yang dijelaskan di atas pada postingan ini. Coba klik jam di bawah ini untuk memulai.
00:00:00
Keren, bukan? :D
Selamat mencoba...
0 comments