5.3K
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
5 comments
Can you tell us more about this? I’d love to find out some additional information.
Very soon this web site will be famous amid all blogging and site-building visitors,
due to it’s fastidious articles
whoah this blog is magnificent i really like studying your articles.
Stay up the great work! You already know, many people are hunting round for this information, you could aid them greatly.
Great article! We are linking to this great post on our website.
Keep up the great writing.
hello!,I really like your writing so much! proportion we keep up a correspondence more about your article
on AOL? I need an expert on this space to resolve my problem.
May be that’s you! Having a look forward to look you.