CARA MEMBUAT JAM DIGITAL DENGAN JAVASCRIPT

Membuat jam digital dengan JavaScript bisa menjadi proyek yang menyenangkan sekaligus membantu kamu mempelajari lebih lanjut tentang penggunaan waktu di dalam JavaScript. Di bawah ini adalah langkah-langkah untuk membuat jam digital Anda sendiri.

Mengatur HTML

Pertama-tama, kita perlu mengatur HTML. Kamu akan membutuhkan elemen dengan ID yang akan menampung jam digital kita:

<div id="jam"></div>

Membuat Fungsi pada JavaScript

Selanjutnya, kita harus membuat sebuah fungsi di JavaScript yang akan mengambil waktu saat ini dan menampilkannya ke dalam elemen yang baru kita buat di HTML.

function tampilkanJam() {
    let tanggal = new Date();
    let jam = tanggal.getHours();
    let menit = tanggal.getMinutes();
    let detik = tanggal.getSeconds();
    document.getElementById('jam').innerHTML = jam + ":" + menit + ":" + detik;
}

Di dalam fungsi ini, kita pertama kali membuat variabel tanggal yang memegang objek tanggal saat ini. Kemudian, kita membuat variabel jam, menit, dan detik yang memegang jam, menit, dan detik saat ini.

Memformat Waktu

Agar lebih rapi, kita dapat memformat waktu agar selalu menampilkan dua digit dengan membuat fungsi baru:

function pad2(number) {   
  return (number < 10 ? '0' : '') + number
}

Dan memperbarui fungsi tampilkanJam() seperti berikut:

function tampilkanJam() {
    let tanggal = new Date();
    let jam = pad2(tanggal.getHours());
    let menit = pad2(tanggal.getMinutes());
    let detik = pad2(tanggal.getSeconds());
    document.getElementById('jam').innerHTML = jam + ":" + menit + ":" + detik;
}

Menjalankan Fungsi dengan setInterval

Terakhir, kita perlu memastikan bahwa jam tersebut tetap diperbarui. Kita bisa menggunakan fungsi setInterval di JavaScript untuk menjalankan fungsi tampilkanJam setiap satu detik.

setInterval(tampilkanJam, 1000);

Dan itulah, jam digital kamu sudah jadi! Kamu dapat menjalankan kode ini di peramban dan melihat hasilnya.

Kamu bisa bereksperimen dengan kode ini, seperti mengubah format waktu atau membuat desainnya lebih menarik. Semua bisa dilakukan dengan sedikit pengetahuan tentang HTML, CSS, dan tentu saja JavaScript.

Ringkasan dari artikel ini adalah panduan mudah untuk membuat jam digital dengan JavaScript. Dengan kemampuan dasar dalam JavaScript, kamu dapat menghasilkan kode yang dapat mendisplay waktu secara real-time di peramban web. Selamat mencoba!