Creating Digital Clock using jQuery & CSS3

I found this article at http://tutorialzine.com , So I would like to share this tutorial to my readers..

The clock doesn’t need a lot of HTML. This is because a large part of it, like the names of the weekdays and the code for the digits, is generated dynamically. Here is the markup that you need to have on your page to use the clock:

HTML Code

<div id="clock" class="light">

    <div class="display">

        <div class="weekdays"></div>

        <div class="ampm"></div>

        <div class="alarm"></div>

        <div class="digits"></div>

    </div>

</div>

<div class="zero">

    <span class="d1"></span>

    <span class="d2"></span>

    <span class="d3"></span>

    <span class="d4"></span>

    <span class="d5"></span>

    <span class="d6"></span>

    <span class="d7"></span>

</div>

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:

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.

$(function(){

    // Cache some selectors
    var clock = $('#clock'),

        alarm = clock.find('.alarm'),

        ampm = clock.find('.ampm');
    // Map digits to their names (this will be an array)

    var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
    // This object will hold the digit elements

    var digits = {};
    // Positions for the hours, minutes, and seconds

    var positions = [

        'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'

    ];
  
 

    // Generate the digits with the needed markup,

    // and add them to the clock
    var digit_holder = clock.find('.digits');
    $.each(positions, function(){
        if(this == ':'){

            digit_holder.append('<div class="dots">');

        }

        else{
            var pos = $('<div>');
            for(var i=1; i<8; i++){

                pos.append('<span class="d' + i + '">');

            }
            // Set the digits as key:value pairs in the digits object

            digits[this] = pos;
            // Add the digit elements to the page

            digit_holder.append(pos);

        }
    });
    // Add the weekday names
    var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),

        weekday_holder = clock.find('.weekdays');
    $.each(weekday_names, function(){

        weekday_holder.append('<span>' + this + '</span>');

    });
    var weekdays = clock.find('.weekdays span');
    // Run a timer every second and update the clock
    (function update_time(){
        // Use moment.js to output the current time as a string

        // hh is for the hours in 12-hour format,

        // mm - minutes, ss-seconds (all with leading zeroes),

        // d is for day of week and A is for AM/PM
        var now = moment().format("hhmmssdA");
        digits.h1.attr('class', digit_to_name[now[0]]);

        digits.h2.attr('class', digit_to_name[now[1]]);

        digits.m1.attr('class', digit_to_name[now[2]]);

        digits.m2.attr('class', digit_to_name[now[3]]);

        digits.s1.attr('class', digit_to_name[now[4]]);

        digits.s2.attr('class', digit_to_name[now[5]]);
        // The library returns Sunday as the first day of the week.

        // Stupid, I know. Lets shift all the days one position down,

        // and make Sunday last
        var dow = now[6];

        dow--;
        // Sunday!

        if(dow < 0){

            // Make it last

            dow = 6;

        }
        // Mark the active day of the week

        weekdays.removeClass('active').eq(dow).addClass('active');
        // Set the am/pm text:

        ampm.text(now[7]+now[8]);
  
 

        // Schedule this function to be run again in 1 sec

        setTimeout(update_time, 1000);
    })();
    // Switch the theme
    $('a.button').click(function(){

        clock.toggleClass('light dark');

    });
});

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.

With this our digital clock is ready!

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedbacks are always welcome!

Thanks!

View Live Demo Download