使用jQuery和CSS3实现一个数字时钟

点击进入更详细教程及源码下载     在线演示

我们经常会在网站中看见一个时钟的效果。今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程。

http://www.html5cn.org/article-5279-1.html

 

代码：

 

<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>

 

CSS

 

/* 0 */

 

#clock .digits div.zero .d1,

#clock .digits div.zero .d3,

#clock .digits div.zero .d4,

#clock .digits div.zero .d5,

#clock .digits div.zero .d6,

#clock .digits div.zero .d7{

    opacity:1;

}

 

jquery code

 

$(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');

    });

 

});