Home / CSS / Create a clock using jQuery
untitled

Create a clock using jQuery

In this tutorial, you will learn how to create a clock using jQuery. This clock is simple using the Javascript Date  object and we had set an interval for every second setInterval(). So let us start learning how to create a clock using jQuery. First of all let us have a look at the HTML Markup.

HTML Markup:

Our body is going to have a div with id clock. This div is going to hold all the content that will  shown in our clock. Then we have few spans in our HTML, the span with id “time” is going to hold the current hours, minutes and seconds. The span with id “ampm” is going to hold the value of AM or PM. At last our span with id “day” is going to hold the current day value (Monday,Tuesday,Wednesday etc).

Since we are done with our HTML section. let us move towards CSS.

CSS:

I am not going to explain the whole css because i preasumed that you have knowledge of CSS. The font that is embedded in this page can be download from this link Click here.

Let us move towards jquery section

jQuery:

First of all we created a function with myClock. This is function is the backbone of this clock. Let me start explaining this, first we created a object of class Date which is builtin in the javascript. Then using the date class methods we are getting the values of hours,minutes and seconds. The hours,minutes and seconds variable stores the current time values. Then we declared an array with name “weekdays”, this array have the values of all the days in weeks. The reason i created this array is that because the getDay() method return the number of the day e.g 0-7. But we want to show the day name instead of day number thats why we created an array. Then we checking the hours using turnary operator if hours is greater than or equal to 12 then we are switching from AM to PM. In the next 3 lines we are simple check if the value is less than 9 we will concate the string with a “0” (o1,o2,o3,o4). At last we are selecting the time span and setting its HTML to the current time similarly for ampm and day.

Final Code:

 

View DemoDownload Now

Share This:

About Hasnain

Check Also

Limit number of characters in input field

Hello, In this tutorial, You’ll learn how you can limit numbers of characters in input …