Recent Articles

Create analog, digital clocks with CSS and JavaScript

Creating analog clock with CSS is no longer a tough task. New HTML5 and CSS properties have made webpages more light-weight but rich in functionality. In continuation to my previous tutorials ‘ HTML5 disc rotation animation‘ and ‘ Rotate object around its axis‘ on JavaScript; this tutorial explains ‘How to create analog clock using CSS’.

Ok, Let’s start the coding then.
 

1. Creating the HTML

First, we need to create the 60 minutes of the clock with the ‘li’ element of the ‘ul’ (unordered list). We’ll name the div class as ‘minute-marks’. Out of 60 minutes, 48 will be the tick marks of minutes between the hours and 12 li elements to show the digits from 1-2-3-…-12.

Also, add individual div to show hours, minutes and seconds hands, as shown below.

Wouldn’t it be nice if we show another Digital Clock inside the Analog clock. Ok, let’s add another set of divs to show digital clock.

 

2. Style the Clock with CSS

The following css rules are used to style the clock.

At this point, our clock should look like -

css analog clock 

3. Include JavaScript

Although, the clock is made up on only CSS styles; JavaScript is used to

  • Know the current timing instance of the clock
  • Manipulate the rotation angles of the clock hands
  • Update the clock CSS style at fixed interval.

Include prefix-free JavScript in the head section of the webpage. Prefix free lets us use only un-prefixed CSS properties anywhere in the webpage. It adds the current browser’s prefix to any CSS code, only when it’s needed.

Now, the clock is set to run and can be tested in the demo link below. The tutorial uses the concept mentioned in the codepen.

Live demo   Download Source

  • lilo

    HI and thank you for this nice tuts:
    how to calculate hand clock (hours-hand,minutes-hand,seconds ) in php
    as you did in:

    @keyframes hours { to {transform:rotate(335deg)} }
    #watch .hours-hand {
    transform:rotate(-25deg);
    }

    @keyframes minutes { to {transform:rotate(422deg)} }
    #watch .minutes-hand {

    transform:rotate(62deg);
    }
    @keyframes seconds { to {transform:rotate(480deg)} }
    #watch .seconds-hand {

    transform:rotate(120deg);
    }

    Please give me the formula i need it in php
    thankx