How To Make Anlog Watch Using HTML CSS And JavaScript
How To Make Analog Watch Using HTML CSS And JavaScript
HTML CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!---gaurav tripathi-->
</head>
<body>
<h1 style="color: aliceblue;">Ga<SPAN style="color: blueviolet;">ura</SPAN>v </h1>
<div class="clock">
<div class="hand hour"></div>
<div class="hand minute"></div>
<div class="hand second"></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>
</body>
</html>
CSS CODE
*{
box-sizing: border-box;
}
body{
background-color: #e2b12b;
background-image: linear-gradient(to right, #21D4FD 0%, #B721FF 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.clock{
height:500px;
width:500px;
background-color: rgba(255, 255, 255, .4);
border-radius: 50%;
border: 2px solid black;
position: relative;
}
.clock .number{
--rotation :0;
font-size: 45px;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
}
.clock .number1{
--rotation : 30deg;
}
.clock .number2{
--rotation:60deg;
}
.clock .number3{
--rotation:90deg;
}
.clock .number4{
--rotation:120deg;
}
.clock .number5{
--rotation:150deg;
}
.clock .number6{
--rotation:180deg;
}
.clock .number7{
--rotation:210deg;
}
.clock .number8{
--rotation:240deg;
}
.clock .number9{
--rotation:270deg;
}
.clock .number10{
--rotation:300deg;
}
.clock .number11{
--rotation:330deg;
}
.clock .hand{
--rotation:0;
position: absolute;
width: 10px;
bottom: 50%;
left: 50%;
height: 40%;
background-color: black;
border-top-left-radius:10px;
border-top-right-radius:10px;
z-index: 10;
transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
transform-origin: bottom;
}
.clock::after{
content:"";
background-color: black;
z-index: 11;
width: 20px;
height: 20px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
border-radius: 50%;
}
.clock .hand.second{
width:3px;
height:42%;
background-color: red;
}
.clock .hand.minute{
width:7px;
height:40%;
background-color: black;
}
.clock .hand.hour{
width:7px;
height:35%;
background-color: black;
}
JavaScript code
setInterval(() => {
const hour = document.querySelector(".hour");
const minute = document.querySelector(".minute");
const second = document.querySelector(".second");
const deg = 6;
const date = new Date();
const setminute = date.getMinutes();
const setSecond = date.getSeconds();
const setHour = date.getHours();
hour.style.setProperty("--rotation", setHour * 30 + setminute / 2);
minute.style.setProperty("--rotation", setminute * 6);
second.style.setProperty("--rotation", setSecond * 6);
}, 1000);
Gaurav
1
2
3
4
5
6
7
8
9
10
11
12
Comments
Post a Comment