<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<meta http-equiv="refresh" content=".1" />
<title>Clock</title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
}
.main{
position: absolute;transform;
}
.needle{
height: 10px;
width: 110px;
background: aqua;
clip-path: polygon(0% 30%, 80% 30%, 80% 0%,100% 50%,80% 100%,80% 70%,0% 70% );
position: absolute;
left: 150px;
top:141px;
transform-origin: left center;
}
.center{
height: 18px;
width: 18px;
top: 138px;
left: 142.3px;
z-index: 2;
position: absolute;
border-radius: 100%;
background: orange;
}
.min{
background: blue;
height: 10px;
width: 80px;
}
.hr{
background: red;
height: 10px;
width: 50px;
}
.sec{
background: green;
}
.center{}
</style>
</head>
<body>
<div class="main">
<img src="img/clock.png" alt="clock" width="300px" height="300px"/>
</div>
<div class="center">
</div>
<div class="needle hr" id="hr">
</div>
<div class="needle min" id="min">
</div>
<div class="needle sec" id="sec">
</div>
</body>
<script type="text/javascript" charset="utf-8">
let time = new Date();
let h = time.getHours();
let m = time.getMinutes();
let s = time.getSeconds();
let a = (eval(30*h + m/2 -90));
let b = (eval(6*m- 90));
let c = (eval(s*6 -90));
let hrs= document.getElementById('hr');
hrs.style.transform=`rotate(${a}deg)`;
let mins = document.getElementById('min');
mins.style.transform=`rotate(${b}deg)`;
let secs = document.getElementById('sec');
secs.style.transform=`rotate(${c}deg)`;
setInterval(clock,4);
</script>
</html>
Comments
Post a Comment