HTML Analog Clock

You'll learn to create an attrative analog clock

Example

93
104
115
126
17
28
Try </>

We define various classes for the elements.

Always add -webkit- before the properties such as transform, animation, transition, @keyframes otherwise these properties don't work in safari.

.watch-container

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

Example

<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.

Example

<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.

Percentage value of width or height is calculated by dividing the width or height of the current element by the width or height of the parent element (200/250).And multiply the quotient by 100.

.left-ear

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

Example

<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.

z-index property represents the stack order of the elements.

.right-ear

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

Example

<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.

Example

<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.

Example

<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.

Example

<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.

Example

<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.

Example

<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.

Example

<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.

Example

<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.

Example


 <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.


Example

<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.

Example


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.

Was this article helpful?