Build A Working Analog Clock using HTML CSS & Javascript

Author: Masud Rana

Publish: 10:25 PM

Hello readers, today in this blog you will learn how to create a functional analog clock using HTML CSS and Javascript. Previously I shared a responsive footer section design using HTML and CSS.

Demo

Clock

Now it's time to create an analog clock using JavaScript.

You can say that JavaScript is the root of any web page, in other words, without JavaScript, a web page is a dead body. We can create many basic to high-level programs using JavaScript (without any JavaScript library).

As you can imagine, this is an analog clock using HTML CSS and Javascript. This is a real-time watch, not a dummy. You can find watch programs, but you'll find most just CSS stuff. Just a vector of the clock. But I'm sharing a live watch, which works in JavaScript.

Working Analog Clock using Javascript [Source Codes]

<!DOCTYPE html>

<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Clock</title>
<link rel="stylesheet" href="style.css">
<style id="clock-animate"></style>
</head>
<body>
<center> <div class="clock">
<div class="center-nut"></div>
<div class="center-nut2"></div>
<div class="indicator">
<div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="sec-hand"></div>
<div class="min-hand"></div>
<div class="hr-hand"></div>
</div></center>
<script>
(function() {
var time = new Date(), //we get this time from our pc time not from server
second = time.getSeconds() / 60 * 360,
minute = time.getMinutes() / 60 * 360 + time.getSeconds() / 60 *6,
hour = time.getHours() / 12 * 360 + time.getMinutes() /60 * 30,
animation = [
"@keyframes sec-hand{from{transform: rotate(" + second + "deg);}to{transform: rotate(" + (second + 360) + "deg);}}",
"@keyframes min-hand{from{transform: rotate(" + minute + "deg);}to{transform: rotate(" + (minute + 360) + "deg);}}",
"@keyframes hr-hand{from{transform: rotate(" + hour + "deg);}to{transform: rotate(" + (hour + 360) + "deg);}}"
].join("");
document.querySelector("#clock-animate").innerHTML = animation;
})();

</script>
</body>
</html>

<style>
*{
margin: 0;
padding: 0;
}

.clock{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 250px;
background: #e9fcfc;
border-radius: 50%;
border: 16px solid #303030;
box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.8);
}
.clock:before{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: '';
width: 259px;
height: 259px;
border: 6px solid #202020;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.clock:after{
position: absolute;
content: '';
height: 150px;
width: 150px;
border-radius: 50%;
background: #59c3ff;
z-index: 1;
}
.center-nut,.center-nut2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.center-nut{
height: 15px;
width: 15px;
background: #262626;
z-index: 2;
}
.center-nut2{
width: 9px;
height: 9px;
background: red;
z-index: 6;
}
.indicator div{
position: absolute;
width: 2px;
height: 5px;
background: #404040;
}
.indicator div:nth-child(1) {
transform: rotate(30deg) translateY(-113px);
}
.indicator div:nth-child(2) {
transform: rotate(60deg) translateY(-113px);
}
.indicator div:nth-child(3) {
transform: rotate(90deg) translateY(-113px);
background: red;
}
.indicator div:nth-child(4) {
transform: rotate(120deg) translateY(-113px);
}
.indicator div:nth-child(5) {
transform: rotate(150deg) translateY(-113px);
}
.indicator div:nth-child(6) {
transform: rotate(180deg) translateY(-113px);
background: red;
}
.indicator div:nth-child(7) {
transform: rotate(210deg) translateY(-113px);
}
.indicator div:nth-child(8) {
transform: rotate(240deg) translateY(-113px);
}
.indicator div:nth-child(9) {
transform: rotate(270deg) translateY(-113px);
background: red;
}
.indicator div:nth-child(10) {
transform: rotate(300deg) translateY(-113px);
}
.indicator div:nth-child(11) {
transform: rotate(330deg) translateY(-113px);
}
.indicator div:nth-child(12) {
transform: rotate(360deg) translateY(-113px);
background: red;
}
.sec-hand{
position: absolute;
height: 1px;
width: 1px;
z-index: 5;
animation: sec-hand 60s linear infinite;
}
.sec-hand:before{
position: absolute;
content: '';
height: 130px;
width: 3px;
left: -1px;
top: -25px;
background: red;
border-radius: 3px;
}
.sec-hand:after{
position: absolute;
content: '';
height: 45px;
width: 7px;
left: -3px;
top: -55px;
background: red;
border-radius: 3px;
}
.min-hand{
position: absolute;
height: 1px;
width: 1px;
z-index: 4;
animation: min-hand 3600s linear infinite;
}
.min-hand:before{
position: absolute;
content: '';
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 70px solid #303030;
left: -3px;
top: -95px;
width: 1px;
height: 1px;
}
.min-hand:after{
position: absolute;
content: '';
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-top: 25px solid #303030;
left: -3px;
top: -25px;
width: 3px;
height: 1px;
}
.hr-hand{
position: absolute;
height: 1px;
width: 1px;
z-index: 3;
animation: hr-hand 43200s linear infinite;
}
.hr-hand:before{
position: absolute;
content: '';
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 55px solid #303030;
left: -3px;
top: -75px;
width: 1px;
height: 1px;
}
.hr-hand:after{
position: absolute;
content: '';
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-top: 20px solid #303030;
left: -3px;
top: -20px;
width: 3px;
height: 1px;
}
</style>

ads1

পরিচিতদেরকে জানাতে শেয়ার করুন

ডোমেইন হোস্টিং সার্ভিস এই লিংকে চাপ দিন ।

ওয়েব ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।

গ্রাফিক্স ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।

ডোমেইন চেকার এই লিংকে চাপ দিন ।

আপনার জন্য আরো কিছু পোস্ট

Copyright © Masud Computer BD™ - All Right Reserved.