Build Analog Clock using HTML + CSS + JavaScript
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="cir">
<div id="midCir"></div>
<div id="hand"></div>
<div id="minHand"></div>
<div id="hourHand"></div>
<span id="t12">12</span>
<span id="t1">1</span>
<span id="t2">2</span>
<span id="t3">3</span>
<span id="t4">4</span>
<span id="t5">5</span>
<span id="t6">6</span>
<span id="t7">7</span>
<span id="t8">8</span>
<span id="t9">9</span>
<span id="t10">10</span>
<span id="t11">11</span>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS code
*{
background: black;
}
#cir{
position: relative;
height: 30em;
width: 30em;
margin: auto;
margin-top: 5em;
background: black;
border:5px solid white;
border-radius: 100%;
}
#t12{
background: black;
position: absolute;
color: white;
border-color: black;
left: 7em;
font-size: 2em;
top: -0.5em;
}
#t1{
background: black;
position: absolute;
color: white;
border-color: black;
left: 11em;
top: 0.4em;
font-size: 2em;
}
#t2{
background: black;
position: absolute;
color: white;
border-color: black;
left: 13.8em;
top: 3em;
font-size: 2em;
}
#t3{
background: black;
position: absolute;
color: white;
border-color: black;
left: 14.9em;
top: 7em;
font-size: 2em;
}
#t4{
background: black;
position: absolute;
color: white;
border-color: black;
left: 13.7em;
top: 10.9em;
font-size: 2em;
}
#t5{
background: black;
position: absolute;
color: white;
border-color: black;
left: 11em;
top: 13.6em;
font-size: 2em;
}
#t6{
background: black;
position: absolute;
color: white;
border-color: black;
left: 7.2em;
bottom: -0.8em;
font-size: 2em;
}
#t7{
background: black;
position: absolute;
color: white;
border-color: black;
right: 11em;
top: 13.6em;
font-size: 2em;
}
#t8{
background: black;
position: absolute;
color: white;
border-color: black;
right: 13.7em;
top: 10.9em;
font-size: 2em;
}
#t9{
background: black;
position: absolute;
color: white;
border-color: black;
right: 14.9em;
top: 7em;
font-size: 2em;
}
#t10{
background: black;
position: absolute;
color: white;
border-color: black;
right: 13.6em;
top: 3em;
font-size: 2em;
}
#t11{
background: black;
position: absolute;
color: white;
border-color: black;
right: 11em;
top: 0.4em;
font-size: 2em;
}
#hand{
position: relative;
margin: auto;
margin-top: 15em;
margin-left: 15em;
height: 0.1em;
width: 15em;
background: white;
transform: rotate(-90deg);
transform-origin: 0;
position: absolute;
}
#minHand{
position: relative;
margin: auto;
margin-top: 15em;
margin-left: 15em;
height: 0.4em;
width: 12em;
background: white;
transform: rotate(-90deg);
transform-origin: 0;
position: absolute;
}
#hourHand{
position: relative;
margin: auto;
margin-top: 15em;
margin-left: 15em;
height: 0.6em;
width: 10em;
background: white;
transform: rotate(-90deg);
transform-origin: 0;
position: absolute;
}
JavaScript code
setInterval(sec, 1000);
secHand = document.getElementById("hand");
minHand = document.getElementById("minHand");
hourHand = document.getElementById("hourHand");
const date = new Date();
Hours = date.getHours();
var secCounter = date.getSeconds()*6-90;
var minCounter = date.getMinutes()*6-90;
if(Hours>12)
Hours-=12
var hourCounter = Hours*30-90;
minHand.style.transform = "rotate("+minCounter+"deg)";
hourHand.style.transform = "rotate("+hourCounter+"deg)";
function sec(){
if(secCounter==270){
secCounter=0-90;
minCounter+=6;
minHand.style.transform = "rotate("+minCounter+"deg)";
hourCounter+=0.5;
hourHand.style.transform = "rotate("+hourCounter+"deg)";
}
if(minCounter==270){
minCounter=0-90;
}
if(hourCounter==270){
hourCounter=-90;
}
secHand.style.transform = "rotate("+secCounter+"deg)";
secCounter+=6;
}
إرسال تعليق
If you have any query, feel free to ask.