jQuery Clock: How to Create an Animated Digital Clock

jquery clockjQuery is a fast and compact  JavaScript library having many useful features. It has an easy to use API compatible with most and the latest web browsers. jQuery has revolutionized the way that users write JavaScript. jQuery library is both versatile and extensible.

Today, we take you through an intermediate level tutorial on jQuery Clock. We assume that you know the basics of HTML, CSS and JavaScript. If you want to refresh your knowledge on JavaScript we suggest that you go through our basic JavaScript and jQuery course. To specifically focus onjQuery for Mobiles, you can check out this course specially designed to make JQuery on Mobile platforms really easy.

jQuery is a cross-platform, free and open source software that can handle document navigation, select DOM elements, create animations, handle events and more. It gives you the ability to create powerful and dynamic web pages and web applications.

How to Connect the Plugin to Your Program

The JQuery plugins to a webpage are added in the same way as the jQuery is installed. The plugin’s JS file is uploaded to the web server. The plugin is included with an HTML script tag. Finally the plugin’s script tag must be included after jQuery’s script tag in the HTML code.

Instead of creating your own clock programs from scratch, you can incorporate jQuery clock plugins which are already available online.  However, to give you an idea, we review a typical jQuery Plugin to create an animated digital clock with date and time.

Calling the jQuery Library

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

The script tag in HTML is used to define a client side script such as JavaScript. It points to an external script file by the “src” attribute. Through this code we link to the jQuery library in the plugin.

Initialization

<script type="text/javascript">
$(document).ready(function() {
var month_Names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October
, "November", "December" ];
var day_Names= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var new_Date = new Date();
new_Date.setDate(new_Date.getDate());
$('#Date').html(dayNames[new_Date.getDay()] + " " + new_Date.getDate() + ' ' + monthNames[new_Date.getMonth()] + ' ' + new_Date.getFullYear());
setInterval( function() {
   var seconds = new Date().getSeconds();
   $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
   },1000);
setInterval( function() {
   var minutes = new Date().getMinutes();
   $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
   },1000);
setInterval( function() {
   var hours = new Date().getHours();
   $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
   }, 1000);
});
</script>

Let’s walk through the above code to make it easier for you to understand.

$(document).ready(function() is executed when the webpage is loaded into the browser.

In this program, we have declared and initialized two arrays. Array month_Names contains the names of all the 12 months of the year. Array day_Names contains the names of all the 7 days of the week. Take note that the Date() function returns the current date. Variable new_Date is assigned the current date returned by the Date() function. Then we get the current date from date object. Next, the day, date, month and year is displayed. The setInterval() function is executed repeatedly, at specified time intervals. The first parameter has to be a function. The second parameter gives the length of the time intervals between each execution. In this program, we have passed 1000 milliseconds as a second parameter which is equivalent to 1 second. In other words, the time is updated every second as in a real time digital clock. If the number of seconds, is less than 10 then digit zero is appended to the left of the single digit value. Similarly for hours and minutes.

In the function call of setInterval() we use ternary operator. If you are unfamiliar with ternary operator, you can take a look at the explanation provided below.

Ternary Operator:  As the name suggests ternary operators take 3 parameters. The syntax looks like this

condition ? result1 : result2;

Here we use a condition before question mark (?) followed by result 1 and result 2 separated by a colon (:). Result1 is called if the condition is true else result2 is called.

CSS Part of the Program

CSS stands for cascading Style Sheets. It’s a style sheet language describing the presentation and formatting of any document written in a Markup Language.  Usually styles are saved in external .css files. External style sheets allow you to manipulate the appearance and layout of all the webpages in the website. This is done simply by editing a single file.

@font-face {
   font-family: 'BebasNeueRegular';
   src: url('BebasNeue-webfont.eot');
   src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
        url('BebasNeue-webfont.woff') format('woff'),
        url('BebasNeue-webfont.ttf') format('truetype'),
        url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}
.clock {width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; }
#Date { font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shado
:0 0 5px #00c6ff; }
ul { width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; }
ul li { display:inline; font-size:10em; text-align:center; font-family:'BebasNeueRegular', Arial, Helvetica, sans-s
rif; text-shadow:0 0 5px #00c6ff; }
#point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padd
ng-left:10px; padding-right:10px; }
@-webkit-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}@-moz-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}

The above code defines the appearance of font type, font style, font size, width clock, date and other important elements.

<div>
  <div id="Date"></div>
     <ul>
         <li id="hours"></li>
         <li id="point">:</li>
         <li id="min"></li>
         <li id="point">:</li>
         <li id="sec"></li>
     </ul>
</div>

The <div> tag is used to outline a division or a section in an HTML document. Here we use unordered list to list the “date”, “hours, minutes, and second.”

 To learn more check out our comprehensive jQuery course to learn more advanced tricks. Once you are familiar with the basics you can move up a notch to create your own clock plugins and Jquery based UI (learn more about jQuery UI in this course). Hope you had fund with us in this tutorial. Do share your experiences with us in the comment section!