3.8K
Analog clock using HTML, CSS, and JavaScript
Hello, guys welcome to you another tutorial of techmidpoint. In this tutorial, I am going to show you How to make an analog clock using HTML, CSS, and JavaScript. First, download the given below image and put the same directory of the HTML file then apply the CSS rules.
HTML and JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock</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; //360deg / 60(min||sec) => 6
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30; //360deg / 12 hour => 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>
CSS
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #091921;
}
.clock {
width: 300px;
height: 300px;
border-radius: 50%;
background-image: url("clock.png");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
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: "";
width: 15px;
height: 15px;
position: absolute;
background-color: #fff;
border-radius: 50%;
z-index: 1000;
}
.hour,
.min,
.sec {
position: absolute;
}
.hr {
width: 160px;
height: 160px;
}
.mn {
width: 190px;
height: 190px;
}
.sc {
width: 230px;
height: 230px;
}
.hr,
.mn,
.sc {
display: flex;
justify-content: center;
}
.hr::before {
content: "";
width: 8px;
height: 80px;
background-color: #ff105e;
z-index: 100;
border-radius: 5px;
}
.mn::before {
content: "";
width: 6px;
height: 90px;
background-color: rgb(15, 105, 207);
z-index: 11;
border-radius: 5px;
}
.sc::before {
content: "";
width: 2px;
height: 140px;
background-color: #fff;
z-index: 10;
border-radius: 5px;
}
For More Tutorials Please Click Here
