ANALOG CLOCK DSIGNING
In this tutorial we have designed a
Working Analog Clock. You will really like this program. 👍
PROGRAM SOURCE CODE :-
1) HTML coding :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Analog Clock Designing</title>
<link rel="stylesheet" type="text/css" href="Analog_Clock.css">
</head>
<body>
<div class="contain">
<div class="hand H" id="a"></div>
<div class="hand M" id="b"></div>
<div class="hand S" id="c"></div>
<div class="dot"></div>
<div class="num n1">1</div>
<div class="num n2">2</div>
<div class="num n3">3</div>
<div class="num n4">4</div>
<div class="num n5">5</div>
<div class="num n6">6</div>
<div class="num n7">7</div>
<div class="num n8">8</div>
<div class="num n9">9</div>
<div class="num n10">10</div>
<div class="num n11">11</div>
<div class="num n12">12</div>
</div>
<script src="..\JavaScript\Analog_Clock.js"></script>
</body>
</html>
2) CSS coding :-
*{
margin: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vw;
background-color: #000;
overflow: hidden;
}
.contain{
width:400px;
height:400px;
background-color: #fff;
margin: 5rem auto;
border:5px solid red;
border-radius: 50%;
position: relative;
}
.num{
width: 100%;
height: 100%;
position: absolute;
text-align: center;
font-family: cursive;
font-size:30px;
font-weight: bolder;
}
.n1{
transform: rotate(30deg);
}
.n2{
transform: rotate(60deg);
}
.n3{
transform: rotate(90deg);
}
.n4{
transform: rotate(120deg);
}
.n5{
transform: rotate(150deg);
}
.n6{
transform: rotate(180deg);
}
.n7{
transform: rotate(210deg);
}
.n8{
transform: rotate(240deg);
}
.n9{
transform: rotate(270deg);
}
.n10{
transform: rotate(300deg);
}
.n11{
transform: rotate(330deg);
}
.n12{
transform: rotate(360deg);
}
.dot{
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.hand{
width: 7px;
background-color: #000;
position: absolute;
left: 49%;
bottom: 50%;
transform-origin: bottom;
}
.H{
height: 25%;
background-color:brown;
border-radius: 50%;
}
.M{
height: 35%;
background-color: blue;
border-radius: 50%;
}
.S{
height: 45%;
background-color:green;
border-radius: 50%;
}
3) JavaScript coding :-
var h = document.getElementById('a');
var m = document.getElementById('b');
var s = document.getElementById('c');
function startClk()
{
var d = new Date();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var sdeg = second * 6;
var mdeg = (minute * 6) + (0.1 * second);
var hdeg = (hour * 30) + (0.5 * minute);
h.style.transform = 'rotate(' + hdeg + 'deg)';
m.style.transform = 'rotate(' + mdeg + 'deg)';
s.style.transform = 'rotate(' + sdeg + 'deg)';
setInterval(startClk,1000);
}
startClk();
OUTPUT :-
( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )
