HTML Analog Clock

You'll learn to create an attrative analog clock

We define various classes for the elements.

.watch-container

Define the width, height and position properties for .watch-container class element.

<style>
.watch-container{
 width:300px;
 height:300px;
 position:relative;
 border:1px solid black;
}
</style>

Try </>

Define border property for the .watch-container class element.

position:relative; positions the .watch-container class element relative to the original position.

.watch

.watch class element is a circular shape of the clock that contains the following properties.

<style>
.watch{
 width:80%;
 height:80%;
 background-color:rgb(250,250,250);
 border:10px solid rgb(210,210,210);
 border-radius:50%;
 position:absolute;
 left:6%;  /* 6% = (100%-80%-12%(total width of left and right borders))/2 */
 top:6%;  /* 6% = (100%-80%-12%(total width of left and right borders))/2 */
}
</style>

Try </>

• position:absolute property positions the current element relative to the parent element.
• left:6%; means left side of .watch class element is 6% away from left side of .watch-container class element.

.left-ear

Define width and height properties for the .left-ear.

<style>
.left-ear{
 width:40%;
 height:40%;
 background-color:rgba(15,157,88,1);
 border-radius:45%;
 transform:rotateZ(-45deg);
 position:absolute;
 left:4%;
 top:5%;
 z-index:-1;
}
</style>

Try </>

• transform property rotates .left-ear class element by -45 degree.

• position:absolute; property positions .left-ear class element relative to the parent element.

• The values of left and top properties are 4% and 5% respectively.

.right-ear

It is designed in the same way as .right-ear.

<style>
.right-ear{
 transform:rotateZ(45deg);
 right:4%;
}
</style>

Try </>

But there are two differences between .left-ear and .right-ear.

One is the angle of 45 degree instead of -45 degree.

In this case, right property is used instead of left property.

.center

The following properties style the .center class element. It is a child of the .watch class element.

<style>
.center{
 width:5%;
 height:5%;
 background-color:black;
 border-radius:50%;
 position:absolute;
 left:47.5%;  /*47.5% = (100%-5%)/2
 top:47.5%;
 z-index:10000;
}
</style>

Try </>

• The value of left property is determined by subtracting the 5% from 100% and dividing by 2.

• top property is calculated in the same way as left property.

.hours-needle

Now we desing the .hours-needle.

<style>
.hours-needle{
 width:2%;
 height:25%;
 background-color:red;
 border-top-left-radius:50%;
 border-top-right-radius:50%;
 transform:rotateZ(0deg);
 transform-origin:bottom;
 position:absolute;
 left:49%; /* 49% = (100%-2%)/2 */ 
 top:25%;  /* 25% = (50%-25%) */
}
</style>

Try </>

• The value of border-radius (in percentage) transforms the sharp rectangular corners into rounded type.

• value of left property is determined by subtracting the width of current element from 100 and dividing by 2.

• value of top property is determined by the height of the current element from 50 and dividing by 2.

.minutes-needle

The properties of the .minutes-needle are the same as .hours-needle but there are two differences.

<style>
.minutes-needle{
 width:2%;
 height:32.5%;
 background-color:green;
 border-top-left-radius:100%;
 border-top-right-radius:100%;
 transform:rotateZ(10deg);
 transform-origin:bottom;
 position:absolute;
 left:49%;
 top:17.5%; /* 17.5% = (50%-32.5%) */
}
</style>

Try </>

The height of the .minutes-needle is 37.5%. The value of the top property changes as the height of the needle changes.

.seconds-needle

.second-needle contains the same properties as the .hours-needle but different height and top properties.

<style>
.seconds-needle{
 width:2%;
 height:40%;
 background:blue;
 border-top-left-radius:100%;
 border-top-right-radius:100%;
 transform:rotateZ(20deg);
 transform-origin:bottom;
 position:absolute;
 left:49%;
 top:10%; /* 10% = 50%-40%  */
}
</style>

Try </>

.left-leg

The following properties are assigned to the .left-leg.

<style>
.left-leg{
 width:16%;
 height:1.2%;
 background-color:rgb(210,210,210);
 border-radius:20%;
 transform:rotateZ(-45deg); 
 transform-origin:left; 
 position:absolute;
 bottom:10%;
 left:15%;
}
</style>

Try </>

border-radius property represents a rounded shape.

It is rotated by -45 degree.

bottom and right properties position the .right-leg class element.

.right-leg

The following properties are specified for the .right-leg. It has the same properties except the right and transform properties.

<style>
.right-leg{
 transform-origin:right;
 transform:rotateZ(45deg); 
 right:15%;
}
</style>

Try </>

.numbers

We define six div and apply the following common class to all of the six div elements.

<style>
.numbers{
 height:10%; 
 width:85%; 
 position:absolute; 
 top:46%;
 left:7.5%;
}
</style>

Try </>

Rotate each div element by 30 degree more than the previous value.

Now define two <span> elements in each <div> element. Place one span element on the right and the other one on left side.

 <div class="numbers" style="transform:rotateZ(0deg);">
  <span style="float:left;">9</span>
  <span style="float:right;">3</span>
 </div> 
 :
 : 
 <div class="numbers" style="transform:rotateZ(150deg);">
  <span style="float:left;">2</span>
  <span style="float:right;">8</span>
 </div>

Try </>

Restore the rotations of all of the span elements that are the children of div elements.

<div class="numbers" style="transform:rotateZ(0deg);">
  <span style="float:left; transform:rotateZ(0deg)">9</span>
  <span style="float:right; transform:rotateZ(0deg)">3</span>
 </div> 
 :
 : 
 <div class="numbers" style="transform:rotateZ(150deg);">
  <span style="float:left; transform:rotateZ(-150deg)">2</span>
  <span style="float:left; transform:rotateZ(-150deg)">8</span>
 </div>

Try </>

Now add the following JavaScript to circulate the needles.

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)";

}

Try</>

How does JavaScript work? It is not a part of this tutorial.