Membuat Jam Analog dan Digital Dengan Javascript bisa dilakukan dengan mudah bahkan untuk pemula, asalkan memahami dasar DOM, CSS transform, dan pengelolaan waktu di browser.
Halo teman-teman, semoga harimu menyenangkan! Pada artikel ini kodelyly.com akan membahas langkah demi langkah bagaimana membangun jam analog dan digital yang ringan, responsif, dan akurat dengan JavaScript murni. Kalian bisa menaruhnya di header website, dashboard, atau bagian hero untuk menambah kesan hidup.
Membuat Jam Analog Dan Digital Dengan Javascript
Sebelum menulis kode, pahami konsepnya: jam digital menampilkan teks waktu (HH:MM:SS), sedangkan jam analog memutar tiga jarum (jam, menit, detik) menggunakan transform: rotate(deg). Derajat rotasi dihitung dari nilai waktu saat ini.
Tabel Ringkas: Analog Vs Digital
| Komponen | Analog | Digital |
|---|---|---|
| Tampilan | Jarum bergerak | Angka HH:MM:SS |
| Perhitungan | Sudut derajat | String waktu |
| Kustomisasi | Skala, warna jarum | Font, format |
| Performa | Sangat ringan | Sangat ringan |
Struktur HTML & CSS Ringkas
Letakkan struktur ini di dalam <body>. Kalian bebas menyesuaikan class sesuai gaya situs Kodelyly.
<div class="clock-wrap">
<div class="brand">kodelyly.com</div>
<div class="clock">
<div class="analog">
<div class="dial">
<span class="hand hour"></span>
<span class="hand minute"></span>
<span class="hand second"></span>
<i class="dot"></i>
</div>
</div>
<div class="digital" id="digital">00:00:00</div>
</div>
</div>
*{box-sizing:border-box}body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;display:grid;place-items:center;min-height:100vh;margin:0;background:#0e1117;color:#e6e6e6}
.clock-wrap{display:grid;gap:16px;text-align:center}
.brand{font-weight:700;letter-spacing:.5px;opacity:.85}
.clock{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap}
.dial{width:200px;height:200px;border:6px solid #2a2f3a;border-radius:50%;position:relative;background:radial-gradient(circle at 50% 45%,#1a1f27 0%,#101318 70%)}
.dial::before{content:"";position:absolute;inset:10px;border-radius:50%;box-shadow:0 0 0 1px #273041}
.hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;display:block}
.hand.hour{width:6px;height:55px;background:#e6e6e6;border-radius:6px}
.hand.minute{width:4px;height:75px;background:#9ac1ff;border-radius:4px}
.hand.second{width:2px;height:85px;background:#ff8a8a;border-radius:2px}
.dot{position:absolute;left:50%;top:50%;width:10px;height:10px;background:#e6e6e6;border-radius:50%;transform:translate(-50%,-50%)}
.digital{font-size:32px;font-variant-numeric:tabular-nums;background:#111827;padding:10px 16px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
Script JavaScript: Logika Jam Analog & Digital
Hitung sudut setiap jarum per detik, lalu putar dengan CSS. Format teks waktu dengan padding dua digit agar rapi.
const el = {
h: document.querySelector('.hand.hour'),
m: document.querySelector('.hand.minute'),
s: document.querySelector('.hand.second'),
d: document.getElementById('digital')
};
function pad(n){return String(n).padStart(2,'0');}
function tick(){
const now = new Date();
const ss = now.getSeconds();
const mm = now.getMinutes();
const hh = now.getHours();
const secDeg = ss * 6; // 60 detik → 360°
const minDeg = (mm + ss/60) * 6; // 60 menit → 360°
const hourDeg = ((hh%12) + mm/60 + ss/3600)*30;// 12 jam → 360°
el.s.style.transform = `translateX(-50%) rotate(${secDeg}deg)`;
el.m.style.transform = `translateX(-50%) rotate(${minDeg}deg)`;
el.h.style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
el.d.textContent = `${pad(hh)}:${pad(mm)}:${pad(ss)}`;
}
setInterval(tick,1000);
tick();
Kesimpulan
Jam analog dan digital bisa dibuat ringkas dengan JavaScript murni: teks digital berasal dari format waktu, sedangkan analog memutar jarum berdasarkan derajat. Dengan struktur HTML sederhana, CSS rapi, dan fungsi tick() yang berjalan tiap detik, kalian sudah punya komponen jam yang cantik, responsif, dan siap dipasang di mana saja. Sekian artikel dari kodelyly.com, semoga bermanfaat dan selamat mencoba!