practice css_analog_watch

<!DOCTYPE html>
<html>
<head>
<style>

.watch-container{
width:250px;
height:250px;
position:relative;
}

.watch{
position:absolute;
width:80%;
height:80%;
border-radius:50%;
border:10px solid rgb(210,210,210);
border-radius:50%;
background-color:rgb(250,250,250);
left:6%;
top:6%;
}

.left-ear{
width:40%;
height:40%;
border-radius:45%;
border:none;
background-color:rgba(15,157,88,1);
position:absolute;
left:3%;
top:9%;
transform:rotateZ(-45deg);
}
.right-ear{
width:40%;
height:40%;
border-radius:45%;
border:none;
background-color:rgba(15,157,88,1);
position:absolute;
right:3%;
top:9%;
transform:rotateZ(45deg);
}

.center{
width:5%;
height:5%;
border-radius:50%;
background-color:black;
position:absolute;
left:47.5%;
top:47.5%;
z-index:10000;
}

.hours-needle{
transform:rotateZ(0deg);
transform-origin:bottom;
width:2%;
height:25%;
background:red;
position:absolute;
left:49%;
top:25%;
border-top-left-radius:50%;
border-top-right-radius:50%;
}
.minutes-needle{
width:2%;
height:32.5%;
background:green;
transform:rotateZ(10deg);
transform-origin:bottom;
position:absolute;
left:49%;
top:17.5%;
border-top-left-radius:100%;
border-top-right-radius:100%;
}
.seconds-needle{
transform:rotateZ(20deg);
transform-origin:bottom;
width:2%;
height:40%;
background:blue;
position:absolute;
left:49%;
top:10%;
border-top-left-radius:100%;
border-top-right-radius:100%;
}

.left-leg{
position:absolute;
bottom:6%;
left:9.6%;
transform:rotateZ(-45deg); 
transform-origin:left; 
width:16%;
height:1.2%;
background-color:rgb(210,210,210);
border-radius:20%;
}
.right-leg{
position:absolute;
bottom:6%;
right:9.6%;
transform:rotateZ(45deg); 
transform-origin:right;
width:16%;
height:1.2%;
background-color:rgb(210,210,210);
border-radius:20%;
}
.numbers{
height:6%; 
width:85%; 
position:absolute; 
top:46%;
left:7.5%;
}

</style>
</head>
<body>
<div class="watch-container">
 <div class="left-ear">
 </div>
 <div class="right-ear">
 </div>
 <div class="watch">
 <div class="numbers"><span style="float:left; ">9</span><span style="float:right;">3</span></div>
 
 <div class="numbers" style="transform:rotateZ(30deg);"><span style="float:left; transform:rotateZ(-30deg);">10</span><span style="float:right; transform:rotateZ(-30deg);">4</span></div>
 
 <div class="numbers" style="transform:rotateZ(60deg);"><span style="float:left; transform:rotateZ(-60deg);">11</span><span style="float:right; transform:rotateZ(-60deg);">5</span></div>
 
 <div class="numbers" style="transform:rotateZ(90deg);"><span style="float:left; transform:rotateZ(-90deg);">12</span><span style="float:right; transform:rotateZ(-90deg);">6</span></div>
 
 <div class="numbers" style="transform:rotateZ(120deg);"><span style="float:left; transform:rotateZ(-120deg);">1</span><span style="float:right; transform:rotateZ(-120deg);">7</span></div>
 
 <div class="numbers" style="transform:rotateZ(150deg);"><span style="float:left;
  transform:rotateZ(-150deg);">2</span><span style="float:right; transform:rotateZ(-150deg);">8</span></div>
 
 <div class="center">
  </div>
  <div class="hours-needle">
  </div>
   <div class="minutes-needle">
  </div>
    <div class="seconds-needle">
  </div>
 </div>

</div>
  
  
  
<script>  
  
var time=0,hours=0,minutes=0,seconds=0,degreeHours=0,degreeMinutes=0,degreeSeconds=0,x=0,setUpdateOfTime;

setUpdateOfTime = setInterval(runTime,1000);

function runTime(){
    time = new Date();

hours = time.getHours();
    minutes = time.getMinutes();
    seconds = time.getSeconds();
    hours %=12;
    degreeHours = hours*30;
    degreeMinutes = minutes*6;
    degreeSeconds = seconds*6;
    degreeHours = degreeHours+0.5*minutes;

document.getElementsByClassName("hours-needle")[0].style.transform = "rotateZ("+degreeHours+"deg)";
    document.getElementsByClassName("minutes-needle")[0].style.transform = "rotateZ("+degreeMinutes+"deg)";
    document.getElementsByClassName("seconds-needle")[0].style.transform = "rotateZ("+degreeSeconds+"deg)";

}  
</script>  
  
  
  
</body>
</html>

Share