CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 使用jQuery和CSS3实现一个数字时钟

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

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


      我们经常会在网站中看见一个时钟的效果。今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程。
代码:
<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');    }); });

【使用jQuery和CSS3实现一个数字时钟】相关文章

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

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

3. jQuery+CSS3实现数字时钟Digital Clock

4. jQuery+CSS3实现数字时钟Digital Clock

5. 使用jQuery和CSS3创建一个全屏幕幻灯效果

6. 使用jQuery和CSS3创建一个全屏幕幻灯效果

7. 使用jQuery和CSS3弹出图像滑块

8. 使用jQuery和CSS3创建Android导航

9. 使用jQuery和CSS3创建Android导航

10. 使用jQuery和CSS3弹出图像滑块

本文来源:https://www.51html5.com/a967.html

点击展开全部

﹝使用jQuery和CSS3实现一个数字时钟﹞相关内容

「使用jQuery和CSS3实现一个数字时钟」相关专题

其它栏目

也许您还喜欢