Pada artikel kali ini saya akan memberikan panduan cara membuat jam analog dengan tampilan keren menggunakan HTML CSS dan JavaScript. Namun sebelum mengikuti panduan ini sebaiknya kalian harus mengerti terlebih dahulu dasar dasar dari html css dan javascript supaya paham.
Jam analog yang akan kita buat, nantinya bisa kita gunakan untuk mempercantik website agar lebih interaktif (bisa di tambahkan sebagai widget). Bagaimana membuat Jam analog menggunakan javascript? berikut panduanya:
Pertama silahkan buat dulu folder untuk menyimpan proyek yang akan kita buat silahkan berinama jam analog atau namanya terserah kalian. Jika sudah di buat silahkan tambhakn file index.html untuk menyimpan kode html dam buat file style.css untuk menyimpan kode css nya.
Selanjutnya silahkan masukan kode html berikut kedalam file index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Jam Dinding</title>
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<script>
const deg = 6;
const hr = document.getElementById('hr');
const mn = document.getElementById('mn');
const sc = document.getElementById('sc');
setInterval (() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
</script>
</body>
</html>Penjelasan Kode pada HTML
Kemudian silahkan masukan kode css berikut kedalam file style.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #091921;
}
.clock {
width: 350px;
height: 350px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-image: url(clock.png);
border: 4px solid #091921;
border-radius: 50%;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05),
0 15px 15px rgba(0, 0, 0, 0.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);
}
.clock::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #fff;
z-index: 1000;
}
.clock .hour,
.clock .min,
.clock .sec
{
position: absolute;
}
.clock .hour, .hr {
width: 160px;
height: 160px;
}
.clock .min, .mn {
width: 190px;
height: 190px;
}
.clock .sec, .sc {
width: 230px;
height: 230px;
}
.hr, .mn, .sc {
display: flex;
justify-content: center;
border-radius: 50%;
position: absolute;
}
.hr::before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #ff105e;
border-radius: 6px 6px 0 0;
z-index: 10;
}
.mn::before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #fff;
border-radius: 6px 6px 0 0;
z-index: 20;
}
.sc::before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #e2e2e2;
border-radius: 6px 6px 0 0;
z-index: 22;
}