Jam digital adalah perangkat yang menampilkan waktu dalam format angka, berbeda dengan jam analog yang menggunakan jarum untuk menunjukkan waktu.
Menggunakan JavaScript untuk membuat jam digital memberikan keuntungan berupa kemampuan untuk menampilkan waktu secara dinamis dan real-time, membuatnya interaktif dan mudah disesuaikan.
Dalam artikel ini, Anda akan belajar bagaimana membuat jam digital dengan JavaScript, mulai dari dasar hingga penambahan fitur menarik yang dapat meningkatkan tampilan dan fungsinya di website Anda.
Baca Juga: Belajar JavaScript Untuk Pemula Sampai Mahir
Langkah-langkah Membuat Jam Digital dengan JavaScript
Di bawah ini, kami akan menjelaskan bagaimana cara membuat jam digital menggunakan JavaScript.
Anda akan belajar berbagai elemen penting dalam coding untuk membuat jam yang berfungsi dengan baik, serta menyesuaikan tampilannya dengan mudah.
Struktur HTML:
Untuk memulai, Anda harus menyiapkan file HTML yang akan digunakan untuk menampilkan jam digital.
Struktur dasar HTML akan mencakup elemen-elemen yang diperlukan untuk menampilkan waktu secara dinamis di halaman web Anda. Berikut adalah contoh kodenya:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Jam Digital</title>
<style>
#clock {
font-family: Arial, sans-serif;
font-size: 48px;
color: white;
background-color: black;
text-align: center;
padding: 20px;
width: 200px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id=”clock”>
<p id=”time”>00:00:00</p>
</div>
<script src=”script.js”></script>
</body>
</html>
Pada struktur HTML ini, kita menggunakan tag <div> dengan id clock untuk menampung waktu, dan elemen <p> dengan id time untuk menampilkan jam yang diperoleh dari JavaScript.
Membuat Fungsi JavaScript:
Sekarang kita akan membuat fungsi JavaScript yang berfungsi untuk mengambil waktu saat ini menggunakan new Date().
Fungsi ini mengembalikan waktu dan tanggal sekarang yang akan kita format dan tampilkan di elemen HTML. Berikut adalah contoh kodenya:
function updateClock() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var timeString = `${hours}:${minutes}:${seconds}`;
document.getElementById(‘time’).innerHTML = timeString;
}
Di dalam fungsi updateClock(), kita menggunakan new Date() untuk mendapatkan waktu saat ini.
Kemudian, kita mengakses jam, menit, dan detik dengan menggunakan getHours(), getMinutes(), dan getSeconds().
Waktu yang diperoleh diubah menjadi string yang disusun dalam format jam:menit:detik, dan kemudian waktu tersebut ditampilkan di dalam elemen dengan id time.
Menampilkan Waktu di Elemen HTML:
Untuk memastikan waktu selalu diperbarui setiap detik, kita dapat menggunakan fungsi setInterval() yang akan menjalankan updateClock() setiap 1000 milidetik (1 detik).
Hal ini membuat jam digital selalu menampilkan waktu yang terkini tanpa perlu me-refresh halaman.
Memperbarui Waktu Secara Otomatis:
Untuk memperbarui jam setiap detik, Anda perlu memastikan bahwa fungsi updateClock() dipanggil secara otomatis menggunakan setInterval() seperti yang telah dijelaskan di atas.
Fungsi ini akan dijalankan berulang kali setiap 1 detik, memperbarui tampilan waktu di browser Anda.
Membuat Jam Digital Lebih Menarik
Setelah membuat jam digital yang berfungsi, Anda bisa membuatnya lebih menarik dengan menambahkan beberapa efek dan desain menggunakan CSS. Anda juga bisa menambahkan elemen animasi untuk membuat jam lebih dinamis.
Kustomisasi Tampilan:
Berikut adalah cara untuk mengubah tampilan jam digital menggunakan CSS. Anda bisa mengubah warna, font-family, ukuran teks, dan bahkan menambahkan efek animasi sederhana menggunakan JavaScript untuk menciptakan jam digital yang lebih menarik.
Berikut ini adalah code yang bisa Anda gunakan untuk mengubah tampilan jam digital menggunakan CSS:
#clock {
font-family: ‘Arial’, sans-serif;
font-size: 48px;
color: #fff;
background-color: #333;
text-align: center;
padding: 20px;
border-radius: 10px;
width: 250px;
margin: 50px auto;
transition: all 0.5s ease;
}
Dengan kode CSS ini, kita menambahkan gaya pada elemen #clock, termasuk font, ukuran, warna teks, dan latar belakang.
Fitur Tambahan
Anda bisa menambahkan berbagai fitur tambahan untuk membuat jam digital lebih menarik dan fungsional, seperti menampilkan tanggal, mengubah format waktu, atau menambahkan alarm.
Menampilkan Tanggal
Anda bisa memperbarui kode di bawah ini untuk menampilkan tanggal saat ini bersama dengan waktu:
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var date = currentTime.toLocaleDateString();
var timeString = `${hours}:${minutes}:${seconds} – ${date}`;
document.getElementById(‘time’).innerHTML = timeString;
Dengan menambahkan kode di atas, Anda akan menampilkan tanggal di bawah waktu dalam format yang lebih lengkap, seperti jam:menit:detik – tanggal.
Mengubah Format Waktu (12 Jam atau 24 Jam)
Untuk mengubah format waktu, Anda bisa menambahkan logika sederhana untuk menampilkan waktu dalam format 12 jam atau 24 jam, serta menambahkan indikator AM/PM pada jam digital Anda.
Menambahkan Alarm
Jika Anda ingin menambahkan fitur alarm, Anda perlu menyimpan waktu alarm yang diinginkan dan memeriksa apakah waktu saat ini sama dengan waktu alarm. Jika ya, JavaScript dapat menampilkan pemberitahuan atau bunyi alarm.
Yuk Belajar Buat Jam Digital Pertama Anda bersama Course-Net!
Artikel ini hanya memberikan gambaran dasar, namun Anda bisa mengembangkan jam digital ini lebih lanjut sesuai kreativitas Anda.
Jangan ragu untuk bereksperimen dengan menambahkan fitur tambahan dan menyesuaikan desainnya. Jika Anda tertarik untuk lebih mendalami JavaScript, Anda bisa mengikuti kursus fullstack web developer JavaScript di Course-Net.
Bersama Course Net, Anda akan mempelajari lebih dalam tentang JavaScript, HTML, CSS, dan web programming lainnya untuk membuat website dan aplikasi yang dinamis!
