Membuat Jam Digital Dengan Javascript

Yenda Purbadian  Selasa, 05 September 2017  JQuery & Ajax  165 0
no images

Ada kalanya dalam pembuatan aplikasi kita membutuhkan tampilan waktu atau jam untuk memperindah aplikasi program yang kita buat, dan biasanya tampilan waktu atau jam disuguhkan pada halaman awal. Atau bisa juga jam dibuat untuk melakukan suatu inputan data kedalam database. Misalnya kita mempunyai suatu website, terus kita membuat sebuah berita yang nantinya akan kita posting pada halaman web kita agar pengunjung bisa membaca berita yang telah kita buat. Nah biasanya jam juga diinputkan kedalam database dengan tujuan agar si pembuat berita tersebut mengetahui jam berapa dibuatnya salah satu berita tersebut. Contoh yang paling kongkrit adalah pada website milik penulis ini, coba Anda perhatikan pada setiap postingan penulis pasti menampilkan tanggal dan waktu pembuatan setiap artikel.

Pada artikel ini penulis akan mengimplementasikan cara untuk membuat jam digital dengan bantuan dari javascript. Kita akan memanfaatkan sebuah fungsi dan objek Date() yang dapat digunakan untuk membuat jam digital yang realtime. Dann fungsi akan dipanggil secara rekursif pada sebuah fungsi setTimeOut.

Terlebih dahulu kita akan membuat sebuah file khusus yang didalamnya terdapat sebuah fungsi atau function dari javascript, adapun script programnya dapat dilihat dibawah ini :

fungsi_jam.php

<?php
ob_start();
?>
<span id="jam">
  <script language="javascript">
  jam();
  function jam(){
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds()
    var timeValue = "" + ((hours >23) ? hours -24 :hours)
    timeValue = ((hours <10) ? "0" : "") + hours
    timeValue += ((minutes < 10) ? ":0" : ":") + minutes
    timeValue += ((seconds < 10) ? ":0" : ":") + seconds
    document.getElementById("jam").innerHTML = " "+timeValue;
	setTimeout("jam()", 1000);
  }
  </script>
</span>
<?php
$jam = ob_get_contents();
ob_end_clean();
?>

Selanjutnya kita akan membuat 1 buah file lagi untuk menampilkan jam-nya, adapun script programnya dapat dilihat dibawah ini :

jam.php

<?php
include "fungsi_jam.php";
?>
<h2>Jam Digital <br /> <?php echo $jam; ?></h2>

Untuk hasilnya dapat Anda lihat dibawah ini :

jam_digital

Gambar diatas apabila dijalankan pada web browser maka detik waktunya akan berjalan mengikuti system waktu pada komputer Anda. Penulis cukupkan sampai disini, sampai bertemu lagi pada tutorial berikutnya.

Terima kasih..

 

Artikel Terkait :

Tidak ada artikel terkait

Komentar :

Tinggalkan Komentar :