Easily Create An Analog Clock Using moment.js And JQuery

Madan Bhintade
8y
8k
0
0

Article

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.

Create a new html page as clock.htmlandcopy paste below code,
1. <!DOCTYPE html>
2. <html lang="en">
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>
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>
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.
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. }
14. .clock
15. {
16. height: 100 % ;
17. width: 100 % ;
18. }
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. }
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. }
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. }
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. }
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;
10. $('.hourhand').css("transform", "rotate(" + hour + "deg)");
11. $('.minutehand').css("transform", "rotate(" + minute + "deg)");
12. $('.secondhand').css("transform", "rotate(" + second + "deg)");
14. //Display date and time just below our clock
15. $('.currentDateTime').text(moment().format('MMM DD YYYY HH:mm:ss'));
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.

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all