CSS3 Digital Clock with jQuery

September 16, 2011

Hello everyone, this tutorial I wanted to create a simple digital clock with date and time, with the help of jQuery script and CSS3 for a little animation, there’s nothing hard enough to understand the various methods and use your creativity in the best of ways. This is just the beginning!

HTML

The markup is really simple and flexible and adapts to many possible scenarios you might encounter. Create a div “clock“, create another div id “Date” it will contain our data, finally defines an unordered list that will contain the hour, minutes and seconds.

The Logic

new Date()
This creates a new Date object with the value of the current date and time on the browser PC.

setDate() and getDate()
The setDate() method sets the day of the month (from 1 to 31), according to local time, while the getDate() method returns the day of the month (from 1 to 31) for the specified date, according to local time.

getSeconds(), getMinutes() and getHours()
These methods allow to extract the seconds, minutes and hours of the current time on the browser PC.

( seconds < 10 ? "0" : "" ) + seconds)
Add a leading zero to the seconds value, the same applies for the minutes and hours. The ? and : symbols used above comprise the ternary operator. This is a special operator that returns the value before the colon if the condition before the query (?) is true, or the value after the colon if the condition is false.

setInterval functionsetInterval is a standard JavaScript function, not part of jQuery. You call it with a function to execute and a period in milliseconds.

Conclusion

Finally, we created a simple digital clock using CSS properties and jQuery. If anyone has any questions, concerns, or comments please feel free to let me know!