create dynamic time using javascript

ga tau kenapa lagi semangat-semangatnya nulis dan berbagi ilmu jga tentunya. woke kali ini kita bakalan nampilin waktu (baca:jam) terkini yang di update secara real time. jadi intinya ya gitu deh.

saya bakalan ngejelasin simple aja. ok pertama-tama teguk dulu kopinya. kedua buat file html bebaslah namanya mah buat div dan kasih id clock

 <div id="clock"></div>

ketiga buat kode javascript buka tag script untuk membuat waktu kita butuh nge-instance (istilah kerennya) objek Date jadi maksudnya instance proses mencetak class menjadi sebuah objek. objek ini udah built-in di javascript jadi temen-temen tinggal instance.

var now = new Date();

nah objek setelah di instance kita masukin ke variable now, lanjut kita buat cara gimana ngedapetin jam, menit, dan detiknya. caranya gampang setelah kita masukin hasil instance ke variable now. nah sekarang variable now berlaku sebagai penampung objek. jadi dari sinilah kita ngakses jam, menit, dan detiknya. codingannya

      var hours = now.getHours(),
          minutes = now.getMinutes(),
          seconds = now.getSeconds();

gampangkan nah sekarang kita mau tampilin. Oke kita akses id clock udah pada tahukan dan kita pake metode innerHTML untuk cetak ke browser. codingannnya

document.getElementById('clock').innerHTML = hours + ":" + minutes + ":" + seconds;

nah terus gimana cara buat secara real time aduh gimana yah sembari ketek keringetan. jadi caranya kita pake fungsi setInterval(). setInterval ini punya dua parameter yang satu fungsi yang kedua waktunya. Ok saya jelasin sedikit setInterval() jadi metode ini fungsinya mengulangi apa yang kita tulis didalamnya dalam waktu yang ditentukan dan ga akan berhenti maksudnya waktu yang ditentukan itu setelah selesai waktunya dia bakalan ngulangin lagi. ngerti ga maksdunya iyah hampir sama kayak perulanganlah anggaplah begitu. nih langsung aja masukin semua kode javascript kita kedalam kedalam metode setInterval() dan waktunya 500ms (1/2 detik).

setInterval(function(){
      var now = new Date(),
          hours = now.getHours(),
          minutes = now.getMinutes(),
          seconds = now.getSeconds();

          document.getElementById('clock').innerHTML = hours + ":" + minutes + ":" + seconds;
    }, 500);

nah dia bakalan ngulangin terus-terusan setiap 500 milisecon untuk terus memeriksa objek Date secara terkini/realtime beserta turunannay dan nampilinnya. ini dilakukan setiap 500ms. nah udah jadi silahkan dicoba ga usah panjang-pangjang segitu aja dari saya