Days
Hours
Minutes
Seconds
Tentu, berikut adalah artikel tentang cara membuat jam analog dan digital menggunakan JavaScript.
Membuat jam analog dan digital adalah salah satu proyek yang bagus untuk melatih kemampuan dasar JavaScript, CSS, dan HTML Anda. Proyek ini akan melibatkan manipulasi DOM (Document Object Model) dan penggunaan fungsi waktu JavaScript.
Langkah pertama adalah membuat struktur HTML untuk menampung elemen-elemen jam kita. Kita akan memiliki satu container utama, satu untuk jam digital, dan satu lagi untuk jam analog.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jam Analog & Digital</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Jam Digital</h1>
<div id="jam-digital" class="jam-digital"></div>
<h1>Jam Analog</h1>
<div class="jam-analog">
<div class="jarum jam" id="jarum-jam"></div>
<div class="jarum menit" id="jarum-menit"></div>
<div class="jarum detik" id="jarum-detik"></div>
<div class="titik-pusat"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Selanjutnya, kita akan menambahkan gaya untuk membuat jam terlihat menarik. Ini mencakup penataan letak, gaya jam digital, dan bentuk jarum jam analog.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: sans-serif;
background-color: #f0f0f0;
flex-direction: column;
}
.container {
text-align: center;
}
/* Styling Jam Digital */
.jam-digital {
font-size: 3em;
margin-bottom: 50px;
background-color: #333;
color: #00ff00;
padding: 15px 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/* Styling Jam Analog */
.jam-analog {
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
position: relative;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
background-color: #fff;
}
.titik-pusat {
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.jarum {
position: absolute;
background-color: #333;
transform-origin: 50% 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -100%) rotate(0deg);
border-radius: 5px;
}
.jarum.detik {
width: 2px;
height: 90px;
background-color: #f00;
z-index: 3;
}
.jarum.menit {
width: 4px;
height: 80px;
background-color: #333;
z-index: 2;
}
.jarum.jam {
width: 6px;
height: 60px;
background-color: #333;
z-index: 1;
}
Ini adalah bagian terpenting. Kita akan menggunakan JavaScript untuk mengambil waktu saat ini dan memperbarui tampilan jam setiap detik.
// Dapatkan elemen-elemen DOM
const jamDigitalElement = document.getElementById('jam-digital');
const jarumJamElement = document.getElementById('jarum-jam');
const jarumMenitElement = document.getElementById('jarum-menit');
const jarumDetikElement = document.getElementById('jarum-detik');
// Fungsi untuk memperbarui jam digital
function updateJamDigital() {
const sekarang = new Date();
let jam = sekarang.getHours();
let menit = sekarang.getMinutes();
let detik = sekarang.getSeconds();
// Tambahkan nol di depan jika angka kurang dari 10
jam = jam < 10 ? '0' + jam : jam;
menit = menit < 10 ? '0' + menit : menit;
detik = detik < 10 ? '0' + detik : detik;
const waktuString = `${jam}:${menit}:${detik}`;
jamDigitalElement.textContent = waktuString;
}
// Fungsi untuk memperbarui jam analog
function updateJamAnalog() {
const sekarang = new Date();
const detik = sekarang.getSeconds();
const menit = sekarang.getMinutes();
const jam = sekarang.getHours();
// Hitung derajat rotasi
const derajatDetik = (detik / 60) * 360;
const derajatMenit = (menit / 60) * 360 + (detik / 60) * 6; // Menit bergerak seiring detik
const derajatJam = (jam / 12) * 360 + (menit / 60) * 30; // Jam bergerak seiring menit
// Terapkan rotasi pada jarum
jarumDetikElement.style.transform = `translate(-50%, -100%) rotate(${derajatDetik}deg)`;
jarumMenitElement.style.transform = `translate(-50%, -100%) rotate(${derajatMenit}deg)`;
jarumJamElement.style.transform = `translate(-50%, -100%) rotate(${derajatJam}deg)`;
}
// Jalankan kedua fungsi untuk pertama kalinya
updateJamDigital();
updateJamAnalog();
// Perbarui jam setiap 1000 milidetik (1 detik)
setInterval(() => {
updateJamDigital();
updateJamAnalog();
}, 1000);
const sekarang = new Date(): Baris ini membuat objek Date baru yang berisi waktu dan tanggal saat ini.sekarang.getHours(), sekarang.getMinutes(), sekarang.getSeconds(): Metode-metode ini mengambil nilai jam, menit, dan detik dari objek Date.jam = jam < 10 ? '0' + jam : jam;: Ini adalah operator ternary. Jika nilai jam kurang dari 10, ia akan menambahkan “0” di depannya (misalnya, 5 menjadi 05), untuk memastikan format dua digit.derajatDetik: Ada 60 detik dalam satu putaran penuh (360 derajat). Jadi, setiap detik adalah 360 / 60 = 6 derajat. (detik / 60) * 360 menghitung total rotasi.derajatMenit: Sama, setiap menit adalah 6 derajat. Namun, kita juga menambahkan sedikit gerakan dari detik, sehingga jarum menit bergerak lebih halus. (detik / 60) * 6 menambahkan 6 derajat untuk setiap putaran penuh detik.derajatJam: Jam memiliki 12 jam dalam satu putaran. Setiap jam adalah 30 derajat (360 / 12). Kita juga menambahkan sedikit gerakan dari menit, sehingga jarum jam bergerak setiap menit.setInterval(fungsi, 1000): Fungsi ini akan memanggil updateJamDigital() dan updateJamAnalog() setiap 1000 milidetik (1 detik), memastikan jam terus diperbarui secara real-time.Dengan menggabungkan ketiga file di atas, Anda akan mendapatkan halaman web sederhana yang menampilkan jam digital dan analog yang berjalan secara real-time.
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
