A real-time clock<\/b> is a very useful element for websites where time is the primary concern. The clock can display world time or local time in the clock as per needs. The clocks are basically two types, analog and digital. This tutorial will explain how to build an analog clock using JavaScript and CSS.<\/p>\n
In this example real-time analog clock, three hands will be used to indicate hours, minutes, and seconds. You can use custom images of the clock dial and hands to match with the web page UI. There are various jQuery plugins are available to build an analog clock. If you want to create your own analog clock with custom images, this step-by-step guide helps you to build a real-time analog clock with pure JavaScript<\/b> and CSS.<\/p>\nHTML:<\/h2>\n
Create a basic structure of the clock using HTML.<\/p>\n
<div<\/span> class<\/span>=\"clock\"<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"h-hand\"<\/span> id<\/span>=\"hour\"<\/span>><\/span> <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"m-hand\"<\/span> id<\/span>=\"min\"<\/span>><\/span> <\/div<\/span>><\/span>\r\n <div<\/span> class<\/span>=\"s-hand\"<\/span> id<\/span>=\"sec\"<\/span>><\/span> <\/div<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/pre>\nJavaScript:<\/h2>\n
JavaScript helps to build logic for the rotation of the clock hands.<\/p>\n
\n- The clockInit()<\/b> function holds the JavaScript code to handle the clock hands movement.<\/li>\n
- JavaScript Date()<\/b> object is used to get the current date and time as per the browser’s time zone.<\/li>\n
- Get hours, minutes, and seconds using getHours()<\/b>, getMinutes()<\/b>, and getSeconds()<\/b> methods respectively.<\/li>\n
- Select HTML elements to show the hour, minute, and second hands in the clock dial.<\/li>\n
- As we know the clock rotates 360 degrees, calculate the hand’s rotation in degrees using JavaScript.<\/li>\n
- Set the CSS style transform property to HTML elements with rotation degrees.<\/li>\n<\/ul>\n
function<\/span> clockInit<\/span>(<\/span>)<\/span>{\r\n var<\/span> date = new<\/span> Date<\/span>();\r\n var<\/span> time = [date.getHours(), date.getMinutes(), date.getSeconds()];\r\n var<\/span> clockDivs = [document<\/span>.getElementById(\"hour\"<\/span>), document<\/span>.getElementById(\"min\"<\/span>), document<\/span>.getElementById(\"sec\"<\/span>)];\r\n \r\n var<\/span> hour = time[1<\/span>]\/2<\/span>+time[0<\/span>]*30<\/span>;\r\n \r\n clockDivs[0<\/span>].style.transform=\"rotate(\"<\/span>+ hour +\"deg)\"<\/span>;\r\n clockDivs[1<\/span>].style.transform=\"rotate(\"<\/span>+ time[1<\/span>]*6<\/span> +\"deg)\"<\/span>;\r\n clockDivs[2<\/span>].style.transform=\"rotate(\"<\/span>+ time[2<\/span>]*6<\/span> +\"deg)\"<\/span>;\r\n}<\/pre>\nNow, call the clockInit()<\/code> function on page load. <\/p>\n