A clock is a device that used to measure time. Clocks are a useful element for any UI if used in a proper way. Clocks can be used in sites where time is the main concern like some booking sites or some app showing arriving times of trains, buses, flights, etc. Clock is basically of two types, Analog and Digital. Here, we will design the digital clock and add some styling to make it more attractive.
Approach: The approach is to use the date object to get time on every second and then re-rendering time on the browser using the new time that we got by calling the same function each second and to make clocks looks like more attractive.
- Step 1: Create a function “showTime”.
- Step 2: Create an instance of the Date object.
- Step 3: Using the methods of Date object get “hours”, “minute”, and “seconds”.
- Step 4: Set AM/PM depending on the hour value. The Date object works in the 24-hour format so we change the hour back to 1 when it gets larger than 12. The AM/PM also changes according to that.
- Step 5: Now make a string using the same HH:MM:SS format changing the hour, minute, and, second value with the values, we get from Date object methods.
- Step 6: Now replace the string variable in the “div” using innerHTML property.
- Step 7: To call the function every second use setInterval() method and set time-interval as 1000ms which is equal to 1s.
- Step 8: Now call the function at the end to start function at exact reloading/rendering time as setInterval() will call first after 1s of rendering.
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.