#Nice clock html update

To make the clock work, we will have to use jQuery to generate the markup for each of the digits, and set a timer to update the classes every second. I believe the best way to learn how the CSS works is by inspecting the live-working code of the demo in Firebug, Chrome's Inspector or the developer tools of your browser of choice. There is a lot of other CSS in the stylesheet, but I will not be presenting it here. I have added a CSS3 transition property to all these spans, which animates the opacity when switching between numbers. Here is the CSS for the zero: assets/css/styles.css /* 0 */Īll segments are visible, except for the middle one (otherwise it would be an 8). The class assigned to their parent div is what makes them visible. They are styled entirely with CSS and are set to opacity:0 by default. These spans are the segments of the digits, like in the digital clocks of old: The Digits Explained As you can see from the fragment above, these divs get a class name from zero to nine (more on that in a second), and contain seven span elements with unique classes. digits element will contain 6 of these divs with spans, one for each digit of the time. And here is the generated markup for one of the digits: display, which in turn holds the list of weekdays, AM/PM label the alarm icon and the time. The main element, the #clock div, contains the. Here is the markup that you need to have on your page to use the clock: index.html This is because a large part of it, like the names of the weekdays and the code for the digits, is generated dynamically. If you'd like to learn how I made it, read on! Update: The second part of this tutorial is now live! There we are adding support for setting alarms with HTML5 audio. I immediately felt the urge to convert it into a working clock and share it with Tutorialzine's readers. It all started last week when I saw this pretty dribbble shot.

Nice clock html