Post
Ask Question

Easily Create An Analog Clock Using moment.js And JQuery

Referto the following screenshot of what we are building:

clock
Figure 1: JQuery and CSS3 based Analog Clock

Follow the below steps to achieve what has been shown in Fig.1.

  1. Create a new html page as clock.htmlandcopy paste below code,
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3.   
    4.     <head>  
    5.         <title>Analog Clock using moment.js and jQuery</title>  
    6.         <meta charset="utf-8">  
    7.             <meta name="viewport" content="width=device-width, initial-scale=1">  
    8.                 <scripttype="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  
    9.                     </script>  
    10.                     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js">  
    11.                         </script>  
    12.                         <link rel="stylesheet" href="clock.css">  
    13.                             <script type="text/javascript" src="clock.js">  
    14.                                 </script>  
    15.     </head>  
    16.   
    17.     <body>  
    18.         <div class="clockarea">  
    19.             <div class="clock">  
    20.                 <div id="hour" class="hourhand">div>  
    21.                     <div id="minute" class="minutehand">div>  
    22.                         <div id="second" class="secondhand">div>  
    23.                             </div>  
    24.                             </div>  
    25.                             <br/>  
    26.                             <div class="currentDateTime">div>  
    27.     </body>  
    28.   
    29.     </html>  
    The above code shows reference to moment.js and jQuery. This also has a reference to custom files like clock.css which we will be generating in next step. And all the clock functionality will be added in step 3 as a part of clock.js.

    As a part of the html body, this is just a DIV based implementation and not  any canvas type of object. DIVs are self-explanatory here.

  2. Create a new stylesheet file as clock.css and copy and paste the following styles to it,
    1. body  
    2. {  
    3.     font - family: Verdana;  
    4. }  
    5. .clockarea   
    6. {  
    7.     height: 200 px;  
    8.     width: 200 px;  
    9.     position: relative;  
    10.     border - radius: 5 px;  
    11.     background: black;  
    12. }  
    13.   
    14. .clock  
    15. {  
    16.     height: 100 % ;  
    17.     width: 100 % ;  
    18. }  
    19.   
    20. .clock: after   
    21. {  
    22.     position: absolute;  
    23.     top: 50 % ;  
    24.     left: 50 % ;  
    25.     width: 12 px;  
    26.     height: 12 px;  
    27.     margin: -6 px00 - 6 px;  
    28.     background: blue;  
    29.     border - radius: 6 px;  
    30.     content: "";  
    31.     display: block;  
    32. }  
    33.   
    34. .hourhand   
    35. {  
    36.     width: 0;  
    37.     height: 0;  
    38.     position: absolute;  
    39.     top: 50 % ;  
    40.     left: 50 % ;  
    41.     margin: -4 px0 - 4 px - 25 % ;  
    42.     padding: 5 px05px25 % ;  
    43.     background: blue; - webkit - transform - origin: 100 % 50 % ; - ms - transform - origin: 100 % 50 % ;  
    44.     transform - origin: 100 % 50 % ;  
    45.     border - radius: 4 px004px;  
    46. }  
    47.   
    48. .minutehand  
    49. {  
    50.     width: 0;  
    51.     height: 0;  
    52.     position: absolute;  
    53.     top: 50 % ;  
    54.     left: 50 % ;  
    55.     margin: -40 % -3 px0;  
    56.     padding: 40 % 3 px0;  
    57.     background: blue; - webkit - transform - origin: 50 % 100 % ; - ms - transform - origin: 50 % 100 % ;  
    58.     transform - origin: 50 % 100 % ;  
    59.     border - radius: 3 px3px00;  
    60. }  
    61.   
    62. .secondhand  
    63. {  
    64.     width: 0;  
    65.     height: 0;  
    66.     position: absolute;  
    67.     top: 50 % ;  
    68.     left: 50 % ;  
    69.     margin: -40 % -1 px00;  
    70.     padding: 40 % 1 px0;  
    71.     background: blue; - webkit - transform - origin: 50 % 100 % ; - ms - transform - origin: 50 % 100 % ;  
    72.     transform - origin: 50 % 100 % ;  
    73. }  
  3. Create a new JavaScript file clock.js and copy paste the following script code to it,
    1. $(function()  
    2.   {  
    3.     setInterval(function()  
    4.         {  
    5.         var now = moment(),  
    6.             second = now.seconds() * 6,  
    7.             minute = now.minutes() * 6 + second / 60,  
    8.             hour = ((now.hours() % 12) / 12) * 360 + 90 + minute / 12;  
    9.   
    10.         $('.hourhand').css("transform", "rotate(" + hour + "deg)");  
    11.         $('.minutehand').css("transform", "rotate(" + minute + "deg)");  
    12.         $('.secondhand').css("transform", "rotate(" + second + "deg)");  
    13.   
    14.         //Display date and time just below our clock   
    15.         $('.currentDateTime').text(moment().format('MMM DD YYYY HH:mm:ss'));  
    16.   
    17.     }, 1000);  
    18. });  
    As a part of JavaScript, we are just getting the current timestamp using moment.js. Once we get the current timestamp, we are calculating hour, minute, and second hand angles based on trigonometric basics.

    Once we get these angles, we are using CSS3 features like "transform" and "rotate" to move these rendered hands. Since we are calculating these angles every second and rotating these DIVs, we will be seeing an actual analog clock effect.

    At last, we are showing current time which is graphically being generated using the above logic.


Similar Articles