Clocks are 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 train, buses, flights, etc. Clock is basically of two types, Analog and Digital. We will be looking at making a digital one.
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.
HTML Code: In this section, we have a dummy time in the format of “HH:MM:SS” wrapped inside a “div” tag.
CSS Code: For CSS, we have just aligned our clock to the center of the page. Other than that, it is just some font-size and width which you can adjust according to your need.
- 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 on 24-hour format so we change hour back to 1 when it get’s 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.
Note: You can use digital fonts available online to make the clock look more beautiful. For that, you have to download their file into your project and then use the “font-face” property to use that custom font.
Complete Code: It is the combination of the above three sections of code.
- How to Design Color Picker using jQuery UI ?
- Design first Application using Express
- How to design full width dropdown Navbar using Bootstrap ?
- How to design Meet the Team Page using HTML and CSS ?
- Design and Implement Calculator using jQuery
- How to Design Image Slider using jQuery ?
- How to Design Stitched Glowing Effect for Button using HTML and CSS ?
- How to Design Homepage like Facebook using HTML and CSS ?
- How to design lazy loading of images/videos for mobiles using jQuery Plugin?
- TCS Digital Interview through Codevita'19
- MOODLE – A digital Learning platform
- HTML | Design Form
- 8 Ways to Shipwreck Your Next Website Design
- HTML | Viewport meta tag for Responsive Web Design
- 6 Best CSS frameworks You should Know to design Attractive Websites
- Introduction to HTML CSS | Learn to Design your First Website in Just 1 Week
- UI vs UX Design : Which Career Option Should You Choose?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.