Make Analog Clock with HTML, CSS and JavaScript
Download Code for Analog Clock 1 - Click here
Download Code for Analog Clock 2 - Click here
Analog Clock 1
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>analog clock</title>
<link rel="stylesheet" href="analog.css">
<script src="analog.js"></script>
</head>
<body>
<div id="clockcontainer">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
</body>
</html>
CSS Code (Save as "analog.css")
#clockcontainer{
position:relative;
margin:auto;
height:40vw;
width:40vw;
background:url(clock.png) no-repeat;
background-size:100%;
}
#hour, #minute, #second{
position:absolute;
background:black;
border-radius:10px;
transform-origin:bottom;
}
#hour{
width: 5px;
height: 20%;
top: 30%;
left: 49.5%;
opacity: 0.8;
background: red;
}
#minute{
width: 4px;
height: 30%;
top: 20%;
left: 49.5%;
opacity: 0.8;
background: blue;
}
#second{
width: 2px;
height: 35%;
top: 15%;
left: 49.5%;
opacity: 0.8;
background: green;
}
JavaScript Code (Save as "analog.js")
setInterval(() => {
d = new Date();
htime = d.getHours();
mtime = d.getMinutes();
stime = d.getSeconds();
hrotation = 30*htime + mtime/2;
mrotation = 6*mtime;
srotation = 6*stime;
hour.style.transform = `rotate(${hrotation}deg)`;
minute.style.transform = `rotate(${mrotation}deg)`;
second.style.transform = `rotate(${srotation}deg)`;
},1000);
Analog Clock 2
HTML Code
<!DOCTYPE html>
<!-- Created By Computer Gyan Guruji -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Analog Clock </title>
<link rel="stylesheet" href="analog.css">
</head>
<body>
<div class="clock">
<div class="center-nut"></div>
<div class="center-nut2"></div>
<div class="indicators">
<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 class="sec"></div>
</div>
<div class="min-hand">
<div class="min"></div>
</div>
<div class="hr-hand">
<div class="hr"></div>
</div>
</div>
<script>
const sec = document.querySelector(".sec");
const min = document.querySelector(".min");
const hr = document.querySelector(".hr");
setInterval(function(){
let time = new Date();
let secs = time.getSeconds() * 6;
let mins = time.getMinutes() * 6;
let hrs = time.getHours() * 30;
sec.style.transform = `rotateZ(${secs}deg)`;
min.style.transform = `rotateZ(${mins}deg)`;
hr.style.transform = `rotateZ(${hrs+(mins/12)}deg)`;
});
</script>
</body>
</html>
CSS Code (Save as clock.css)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
}
body{
display: grid;
place-items: center;
background: #dde1e7;
text-align: center;
}
.clock{
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #dde100;
height: 250px;
width: 250px;
border-radius: 50%;
box-shadow: -3px -3px 7px #ffffff73,
3px 3px 5px rgba(94,104,121,0.288);
}
.clock:before{
position: absolute;
content: '';
height: 220px;
width: 220px;
background: #dde1e7;
border-radius: 50%;
box-shadow: inset -3px -3px 7px #ffffff73,
inset 3px 3px 5px rgba(94,104,121,0.288);
}
.clock:after{
position: absolute;
content: '';
height: 120px;
width: 120px;
background: #dde1e7;
border-radius: 50%;
box-shadow: -1px -1px 5px #ffffff73,
1px 1px 3px rgba(94,104,121,0.288);
}
.clock .center-nut{
height: 15px;
width: 15px;
background: #404040;
border-radius: 50%;
z-index: 2;
position: absolute;
}
.clock .center-nut2{
height: 9px;
width: 9px;
background: #3498db;
border-radius: 50%;
z-index: 15;
position: absolute;
}
.indicators div{
position: absolute;
width: 2px;
height: 5px;
background: #404040;
}
.indicators div:nth-child(1){
transform: rotate(30deg) translateY(-100px);
}
.indicators div:nth-child(2){
transform: rotate(60deg) translateY(-100px);
}
.indicators div:nth-child(3){
background: #3498db;
transform: rotate(90deg) translateY(-100px);
}
.indicators div:nth-child(4){
transform: rotate(120deg) translateY(-100px);
}
.indicators div:nth-child(5){
transform: rotate(150deg) translateY(-100px);
}
.indicators div:nth-child(6){
background: #3498db;
transform: rotate(180deg) translateY(-100px);
}
.indicators div:nth-child(7){
transform: rotate(210deg) translateY(-100px);
}
.indicators div:nth-child(8){
transform: rotate(240deg) translateY(-100px);
}
.indicators div:nth-child(9){
background: #3498db;
transform: rotate(270deg) translateY(-100px);
}
.indicators div:nth-child(10){
transform: rotate(300deg) translateY(-100px);
}
.indicators div:nth-child(11){
transform: rotate(330deg) translateY(-100px);
}
.indicators div:nth-child(12){
background: #3498db;
transform: rotate(360deg) translateY(-100px);
}
.sec-hand,.min-hand,.hr-hand{
position: absolute;
}
.sec-hand, .sec{
height: 180px;
width: 180px;
z-index: 6;
}
.min-hand, .min{
height: 140px;
width: 140px;
z-index: 5;
}
.hr-hand, .hr{
height: 110px;
width: 110px;
z-index: 4;
}
.sec,.min,.hr{
display: flex;
justify-content: center;
position: absolute;
}
.sec:before{
position: absolute;
content: '';
height: 110px;
width: 3px;
background: #3498db;
}
.sec:after{
position: absolute;
content: '';
height: 35px;
width: 7px;
background: #3498db;
top: 105px;
border-radius: 5px;
}
.min:before{
position: absolute;
content: '';
width: 1px;
top: -15px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 60px solid #e95949;
}
.min:after{
position: absolute;
content: '';
width: 3px;
top: 40px;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-top: 30px solid #e95949;
}
.hr:before{
position: absolute;
content: '';
width: 1px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 35px solid #303030;
}
.hr:after{
position: absolute;
content: '';
width: 3px;
top: 34px;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-top: 25px solid #303030;
}
Post a Comment