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


点击进入更详细教程及源码下载 在线演示 我们经常会在网站中看见一个时钟的效果。今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程。 代码: <div id="c...

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


      我们经常会在网站中看见一个时钟的效果。今天向大家分享一个使用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');    }); });
标签: classjquery

更多 class 相关资讯

CSS3+jQuery日历事件插件

CSS3+jQuery日历事件插件

今天向大家分享一个CSS3+jQuery日历事件插件,介绍怎么实现它。 HTML <div class="week"> <div class="day"> <div class="daybar"> <p>31

更多 jquery 相关资讯

使用jQuery和CSS3弹出图像滑块

使用jQuery和CSS3弹出图像滑块

源码下载 在线演示 在这篇文章中,我们将分享有关如何创建一个弹出图像滑块。我们进行click事件时使用CSS3过渡来变换动画。此图片滑块不会做幻灯片上显示

CSS3+jQuery的图像画廊Photobox

CSS3+jQuery的图像画廊Photobox

    源码下载 在线演示 CSS3+jQuery的图像画廊Photobox ,一个轻量级的图像画廊模态窗口脚本,它使用CSS3光滑的动画和过渡效果,采用GPU渲染,可以完全控制,可定制CSS

Prompt轻量级提示框弹出层Jquery插件

Prompt轻量级提示框弹出层Jquery插件

     此Jquery插件是一个轻量级消息提示框插件,该插件使用jQuery和纯CSS构建,代码不多,但功能实用,界面简洁美观,使用简单。具有自动关闭功能,时间可控制,也可用代码强制关闭,具

基于Edge Animate可视化工具开发CSS3动画

基于Edge Animate可视化工具开发CSS3动画

今天这篇文章主要介绍透过Adobe Edge Animate这款可视化工具操作CSS3的动画,与前一篇文章的根本区别就是Edge Animation制作动画是可视化的,操作CSS3动画的方式是和Jav

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

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

介绍来自于tympanus的一个全屏幻灯特效教程,在这个教程中将介绍如何使用jQuery和CSS3来实现一个全屏的幻灯特效,你将看到每一个幻灯都从水平或者垂直中间断开然后消失,使用不

Cufon, jQuery和CSS3实现的超强飞出菜单

这里教程通过使用cufon类库实现比较酷的的字体,如果你不知道什么是cufon请参考其它文章。Cufon现在的使用可能不如以前了,更好的选择是使用Google font,但是很可惜,中文

在IE中使用高级CSS3选择器

别误会,IE是不支持CSS3高级选择器,包括最新的IE8(详见《CSS选择器的浏览器支持》),但是CSS选择器的确是很有用的,它可以大大的简化我们的工作,提高我们的代码效率,并让我们很方便的

jQuery插件实现css3效果

jQuery插件实现css3效果

css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松