PROJECT SEDERHANA JAVASCRIPT #2 MODUL 4
Jam Digital Dengan JavaScript
halo semua, kali ini saya akan memberi contoh beserta source code untuk mini project kita kali ini. Saya akan membuat beberap contoh dan menjelaskan setiap fungsi yang ada sebisa mungkin.
Di blog kali ini kita akan membuat mini project "Jam Digital" yang di mana button ini terhubung dengan beberapa elemen html dan bisa memanipulasi nya BAIK LANGSUNG SAJA YA GUYS YA!!!
1. function updateClock() { ... }: Ini adalah fungsi yang memperbarui tampilan jam dan mengganti warna border.
var now = new Date();: Membuat objek Date untuk mendapatkan waktu saat ini.- Mengambil jam (
hours), menit (minutes), dan detik (seconds) dari objek Date. - Memformat waktu dengan menambahkan "0" di depan jika nilai kurang dari 10.
2. var jamElement = document.getElementById("jam");: Mengambil elemen dengan ID "jam" dari dokumen HTML.
3. jamElement.textContent = formattedHours + ":" + formattedMinutes + ":" + formattedSeconds;: Mengatur teks dalam elemen "jam" dengan waktu yang telah diformat.
4. Ganti warna border berdasarkan detik:
- Jika detiknya genap (
seconds % 2 === 0), maka warna border diatur menjadi "red". - Jika detiknya ganjil, maka warna border diatur menjadi "blue".
5. setInterval(updateClock, 1000);: Memanggil fungsi updateClock setiap 1000 milidetik (setiap detik) dengan menggunakan setInterval.
6. updateClock();: Memanggil fungsi updateClock saat halaman dimuat pertama kali untuk menginisialisasi tampilan jam.
Dengan cara ini, halaman akan terus memperbarui tampilan jam dan mengganti warna border setiap detiknya.
FULL CODE: https://github.com/2ndmurphy/digital-clock
1. function updateClock() { ... }: Ini adalah fungsi yang memperbarui tampilan jam dan mengganti warna border.
var now = new Date();: Membuat objekDateuntuk mendapatkan waktu saat ini.- Mengambil jam (
hours), menit (minutes), dan detik (seconds) dari objekDate. - Memformat waktu dengan menambahkan "0" di depan jika nilai kurang dari 10.
2.
var jamElement = document.getElementById("jam");: Mengambil elemen dengan ID "jam" dari dokumen HTML.3.
jamElement.textContent = formattedHours + ":" + formattedMinutes + ":" + formattedSeconds;: Mengatur teks dalam elemen "jam" dengan waktu yang telah diformat.4. Ganti warna border berdasarkan detik:
- Jika detiknya genap (
seconds % 2 === 0), maka warna border diatur menjadi "red". - Jika detiknya ganjil, maka warna border diatur menjadi "blue".
5.
setInterval(updateClock, 1000);: Memanggil fungsi updateClock setiap 1000 milidetik (setiap detik) dengan menggunakan setInterval.6.
updateClock();: Memanggil fungsi updateClock saat halaman dimuat pertama kali untuk menginisialisasi tampilan jam.Dengan cara ini, halaman akan terus memperbarui tampilan jam dan mengganti warna border setiap detiknya.
FULL CODE: https://github.com/2ndmurphy/digital-clock
.png)
Komentar
Posting Komentar