Analog Clock Html Css

8 min read Jul 03, 2024

Membuat Jam Analog dengan HTML dan CSS

Artikel ini akan memandu Anda untuk membuat jam analog sederhana dengan menggunakan HTML dan CSS.

1. Struktur HTML

Pertama, kita akan membuat struktur HTML untuk jam analog kita. Buat file HTML baru (misalnya, clock.html) dan tambahkan kode berikut:

Kode di atas membuat struktur dasar untuk jam analog.

div.clock adalah wadah utama untuk jam.
div.hand dengan kelas hour, minute, dan second mewakili jarum jam, menit, dan detik.
div.center adalah pusat jam.
div.number dengan kelas number-1 hingga number-12 mewakili angka pada jam.

2. Styling dengan CSS

Selanjutnya, buat file CSS baru (misalnya, style.css) dan tambahkan kode berikut:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    font-family: sans-serif;
}

.clock {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

.hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    background-color: #000;
    border-radius: 10px;
}

.hour {
    width: 8px;
    height: 80px;
    transform: translateX(-50%) rotate(90deg);
}

.minute {
    width: 6px;
    height: 110px;
    transform: translateX(-50%) rotate(90deg);
}

.second {
    width: 4px;
    height: 130px;
    background-color: red;
    transform: translateX(-50%) rotate(90deg);
}

.center {
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.number {
    position: absolute;
    font-size: 20px;
    color: #000;
}

.number-1 {
    top: 5%;
    left: 48%;
}

.number-2 {
    top: 18%;
    left: 86%;
}

/* Posisi angka lainnya (number-3 hingga number-12) */

Kode CSS di atas memberikan styling untuk jam analog:

body: Mengatur tata letak halaman agar jam berada di tengah.
.clock: Menentukan ukuran, bentuk, warna latar belakang, dan bayangan jam.
.hand: Mengatur posisi dan transformasi awal untuk jarum.
.hour, .minute, .second: Menentukan lebar, tinggi, dan warna untuk masing-masing jarum.
.center: Menentukan ukuran dan warna untuk pusat jam.
.number: Menentukan ukuran dan warna angka.
.number-1, .number-2, ...: Menentukan posisi masing-masing angka pada jam.

3. Menambahkan Javascript

Terakhir, kita akan menambahkan Javascript untuk membuat jam berjalan. Buat file Javascript baru (misalnya, script.js) dan tambahkan kode berikut:

const hourHand = document.querySelector('.hour');
const minuteHand = document.querySelector('.minute');
const secondHand = document.querySelector('.second');

function setDate() {
    const now = new Date();
    const seconds = now.getSeconds();
    const minutes = now.getMinutes();
    const hours = now.getHours();

    const secondsDegrees = ((seconds / 60) * 360) + 90;
    const minutesDegrees = ((minutes / 60) * 360) + 90;
    const hoursDegrees = ((hours / 12) * 360) + 90;

    secondHand.style.transform = `translateX(-50%) rotate(${secondsDegrees}deg)`;
    minuteHand.style.transform = `translateX(-50%) rotate(${minutesDegrees}deg)`;
    hourHand.style.transform = `translateX(-50%) rotate(${hoursDegrees}deg)`;
}

setInterval(setDate, 1000);

Kode Javascript di atas:

setDate: Fungsi ini mendapatkan waktu saat ini dan menghitung derajat rotasi untuk setiap jarum.
setInterval(setDate, 1000): Memanggil fungsi setDate setiap 1000 milidetik (1 detik) untuk membuat jam berjalan.

4. Menjalankan Jam Analog

Pastikan Anda menghubungkan file CSS dan Javascript ke file HTML. Tambahkan baris berikut di dalam tag <head> dari clock.html Anda:

Simpan semua file dan buka clock.html di browser Anda. Anda sekarang akan melihat jam analog yang berjalan!

Penjelasan Tambahan

Derajat rotasi: Untuk menghitung derajat rotasi, kita menggunakan rumus (nilai / nilai maksimum) * 360 + 90.
- nilai adalah nilai saat ini (detik, menit, atau jam).
- nilai maksimum adalah nilai maksimum untuk masing-masing (60 untuk detik dan menit, 12 untuk jam).
- 360 adalah jumlah derajat dalam lingkaran penuh.
- 90 adalah penyesuaian derajat untuk memastikan jarum dimulai pada posisi yang benar (jam 12).
transform: translateX(-50%): Ini memindahkan pusat rotasi jarum ke tengah jam.

Kesimpulan

Selamat! Anda telah berhasil membuat jam analog dengan HTML, CSS, dan Javascript. Anda dapat memodifikasi kode ini lebih lanjut untuk menambahkan fitur tambahan seperti styling yang lebih kompleks, efek animasi, dan lain sebagainya.