InformasiTutorialTutorial JavaScript

Tutorial Membuat Jam Digital dengan JavaScript

Afid Arifin – Selamat menunaikan ibadah puasa 1 Ramadhan bagi yang menjalankannya. Setelah sebelumnya saya membuat Tutorial Membuat Jam Analog dengan JavaScript, kini saya saatnya berbagi Tutorial Membuat Jam Digital dengan JavaScript. Demo dari script jam digital ini dapat Anda lihat pada foto screenshot berikut ini.

Tutorial Membuat Jam Digital dengan JavaScript
Dokumen Pribadi

Tampilan cukup elegan karena di balut dengan sentuhan bootstrap dan warna gradient css. Selain itu, pada jam digital ini juga saya sematkan audio khas suara jam digital berbunyi “TIK!” di setiap detiknya.

Selain itu, saya juga telah memberikan sentuhan Bootstrap dan warna background dinamis, di mana setiap 0%-100% linear warna dapat berubah-ubah.

Baca Juga

Membuat QR Code Generator dengan PHP dan API Google

Source Code

Bagi Anda yang tertarik dengan jam digital javascript ini, Anda dapat mendownloadnya terlebih dahulu di sini. Isi dari file javascriptnya adalah seperti berikut.

window.onload = function() {
  this.setInterval(function() {

    let date = new Date(),
    hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds();

    // Tambahkan angka nol di depan jam, menit dan detik
    hours = (hours <= 9) ? ('0' + hours) : hours;
    minutes = (minutes <= 9) ? ('0' + minutes) : minutes;
    seconds = (seconds <= 9) ? ('0' + seconds) : seconds;
    
    // Tampilkan jam, menit dan detik
    document.getElementsByClassName('hours')[0].innerHTML = hours;
	  document.getElementsByClassName('minutes')[0].innerHTML = minutes;
    document.getElementsByClassName('seconds')[0].innerHTML = seconds;
    
    // Deteksi AM dan PM sistem
    am = document.getElementsByClassName('am')[0].classList,
    pm = document.getElementsByClassName('pm')[0].classList;
    
    // Memberi efek aktif pada elemen AM dan PM
    (hours >= 12) ? pm.add('light-on') : am.add('light-on');
    (hours >= 12) ? am.remove('light-on') : pm.remove('light-on');

    // Audio mp3 untuk bunyi tik di setiap detiknya
    var audio = new Audio('sound.mp3');
    for(i = 0; i <= 59; i++) {
      if(seconds == i) {
        audio.play();
      }
    }
  }, 1000);
}

Agar hasil maksimal dan sesuai dengan, jangan sedikit pun memodifikasi file javascript tersebut. Agar lebih dipahami lagi, Anda dapat membaca baris komentar yang telah saya sertakan di dalam file javascript jam digital tersebut.

Penjelasan Isi File

Di dalam file yang Anda download tersebut berisi file seperti berikut.

  • /fonts/, merupakan folder berisi font jam digital Anda.
  • style.css, digunakan untuk mempercantik tampilan jam digital.
  • sound.mp3, file mp3 untuk membunyikan suara “TIK!” di setiap detiknya.
  • script.js, berisi file javascript jam digital.
  • jam_digital.html, kerangka jam digital.

Kesimpulan

Source code jam digital javascript ini sudah cukup fleksibel dann Anda dapat mengembangkannya lagi. Jam digital ini sudah berisi file mp3 agar lebih bagus lagi fitur-fiturnya.

Selain itu, saya menambahkan sentuhan bootstrap untuk membuat layoutnya agar berada di tengah layar. Karena saya tidak menyediakan link demonya, maka silahkan Anda install sendiri script jam digital ini.

Demikian artikel kali ini dan semoga bermanfaat buat Anda. Dan yang terpenting, Anda dilarang menjual script sederhana dari saya ini. Selamat menggunakan dan sampai jumpa lagi di artikel sebelumnya.

Tags
Show More

Related Articles

2 Comments

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Back to top button
Close
Close