Hello readers, Today in this blog you'll learn how to build a Working Analog Clock using HTML CSS & Javascript. Earlier I have shared a Working Digital Clock using HTML CSS & Javascript, now it's time to create a Working Analog Clock using Javascript.
A clock or watch is called "analog" when it has moving hands and (normally) hours marked from 1 to 12 to show you the time. Some have Roman Numerals (I, II, III, etc) instead, or no numbers at all.
As you can see in the image, this is an Analog Clock which is based in HTML CSS & Javascript. There are 12 marks for showing times 1 to 12 and 3 handles for showing minutes, hours, and second. As usually, the hour handle is small, and minute handle in bigger than that, and the second handle larger overall.If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Working Analog Clock).
Video Tutorial of Working Analog Clock using Javascript
As you see in the video this is a real-time working clock. This time takes from your PC, not from the server. I am sharing this live clock program, which functions is work in javascript. I had already shared many Javascript programs, click here to watch them all.
If you like this program (Working Analog Clock) and want to get the source codes of this program. You can easily get from the download link which is given below.
Working Analog Clock in HTML CSS & Javascript [Source Codes]
As always, before sharing the codes of this program (Working Analog Clock). Let's a few talk about the main tags and codes of this program. In HTML File, First I created a <div> tag with the class name "clock" and placed all other tags inside it. Then I created another two <div> the with class name "center-nut" and "center-nut2".
These two tags I created to show clock center nuts. After that, I created a <div> tag with the class name "indicators" and placed all 12 <div> tags inside it to show time indicator lines in the clock. Similarly, I created again three <div> tags with the class name "sec-hand", "min-hand" and "hr-hand". These tags used to show hr, sec, and min hands in the clock.
In the CSS File, first I placed all contents at the center using the CSS grid property. After that, I did basic styling to the clock. Then I created some indicators to show time using CSS selectors. At last, I created three hands for the clock which are an hour, minutes, and seconds. I can't say all things in writing so watch the video tutorial for better understanding.
In the Javascript File, First I call all needed tags in javascript file using their class name or you can say using CSS selectors. Then using Javascript new Date(); function I fetched real-time from our current PC and store in the time name variable. Then I calculate this fetched time according to our analog clock. After that, I took a setInterval(); function and placed all javascript code inside it. The JavaScript setInterval() method executes a specified function multiple times at set time intervals specified in milliseconds (1000ms = 1second).
To create this program (Working Analog Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.
These two tags I created to show clock center nuts. After that, I created a <div> tag with the class name "indicators" and placed all 12 <div> tags inside it to show time indicator lines in the clock. Similarly, I created again three <div> tags with the class name "sec-hand", "min-hand" and "hr-hand". These tags used to show hr, sec, and min hands in the clock.
In the CSS File, first I placed all contents at the center using the CSS grid property. After that, I did basic styling to the clock. Then I created some indicators to show time using CSS selectors. At last, I created three hands for the clock which are an hour, minutes, and seconds. I can't say all things in writing so watch the video tutorial for better understanding.
In the Javascript File, First I call all needed tags in javascript file using their class name or you can say using CSS selectors. Then using Javascript new Date(); function I fetched real-time from our current PC and store in the time name variable. Then I calculate this fetched time according to our analog clock. After that, I took a setInterval(); function and placed all javascript code inside it. The JavaScript setInterval() method executes a specified function multiple times at set time intervals specified in milliseconds (1000ms = 1second).
To create this program (Working Analog Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.
CSS FILE:
Nice Clock
ReplyDeleteNice
ReplyDeleteThank you :)
DeleteIn This Click No JS Is Used
ReplyDeletePost a Comment
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.