Home / Tutorials / Create Digital Clock using jQuery & CSS3
digital-cloack

Create Digital Clock using jQuery & CSS3

View Demo Download

I have created digital clock using jquery & css3 and I’m sharing here to learn you all how to create it.

Markup

Digital clock design doesn’t need much of html code. It just need weekdays names and digits and digits are generated dynamically. So here is markup I have created:

index.html

The main element, the #clock div, contains the .display, which in turn holds the list of weekdays, AM/PM label the alarm icon and the time. And here is the generated markup for one of the digits:

The .digits element will contain 6 of these divs with spans, one for each digit of the time. 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. These spans are the segments of the digits, like in the digital clocks of old:

clock-design

This is styled entirely with CSS and are set to opacity:0 by default. The class assigned to their parent div is what makes them visible. Here is the CSS for the zero:

assets/css/styles.css

All segments are visible, except for the middle one (otherwise it would be an 8). I have added a CSS3 transition property to all these spans, which animates the opacity when switching between numbers.

There is a lot of other CSS in the stylesheet, but I will not be presenting it here. 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.

digital-clock-dark

Javascript/jQuery code

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. To make our lives easier, we will use the moment.js library (quick tip) to compensate for the lacking JavaScript native date and time functions.

assets/js/script.js

The most important piece of code here is the update_time function. Inside it, we get the current time as a string, and use it to fill in the elements of the clock and to set the correct classes to the digits.

Congrats! your digital clock is ready now.

See demo here

About cmadmin

Web Developer & Designer | Android App Developer

Check Also

css3-media-queries

Media Queries for Standard Devices

A major component of responsive design is creating the right experience for the right device. …

sass

Amazing SAAS – extension of CSS3

What is SASS? SASS is an extension of CSS3, adding nested rules, variables, mixins, selector …

Login


Username
Create an Account!
Password
Forgot Password? (close)

Sign Up


Username
Email
Password
Confirm Password
Want to Login? (close)

Forget Password?


Username or Email
(close)
%d bloggers like this:
SHARE
OR
SUBSCRIBE
To get latest new / tutorial / technology / development information subscribe with us.
ARE YOU READY? GET IT NOW!
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !
OR SUBSCRIBE WITH