漂亮jQuery和CSS3制作数字时钟(jQuery篇)

HTML

和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的。

<div?id="clock"?class="light">?
????<div?class="display">?
????????<div?class="date"></div>?
????????<div?class="digits"></div>?
????</div>?
</div>?

time-img

jQuery

CSS代码请参照上一篇文章,本文不再啰嗦,直接看jQuery代码。

首先我们定义参数,定义用来调用数字的class名称数组,定义中文星期名称,定义时分秒的位置。

$(function(){?
????var?clock?=?$('#clock');?
????//定义数字数组0-9?
????var?digit_to_name?=?['zero','one',?'two',?'three',?'four',?'five',?'six',?'seven',?'eight',?'nine'];?
????//定义星期?
????var?weekday?=?['周日','周一','周二','周三','周四','周五','周六'];?
?
????var?digits?=?{};?
?
????//定义时分秒位置?
????var?positions?=?[?
????????'h1',?'h2',?':',?'m1',?'m2',?':',?'s1',?'s2'?
????];?
});?

然后构建数字时钟的时分秒。在上一篇文章中我们是直接在html中放置了数字时钟的html结构,而现在我们使用jQuery来处理时钟的展示,通过append()方法来构建数字时钟。

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?+?'">');?
????????????}?
?
????????????digits[this]?=?pos;?
????????????digit_holder.append(pos);?
????????}?
????});?

最后,我们要让时钟跑起来。每秒钟调用一次update_time()函数,在update_time()中,我们先用moment.js来格式化时间,关于moment.js的介绍请参照本站文章:使用moment.js轻松管理日期和时间。然后根据当前时分秒,分别设置时分秒数字的class属性,即显示当前时分秒数字。接着继续使用moment.js来格式化日期和星期,最终完成了会走动的数字时钟,请看下面代码:

$(function(){?
????...?
????(function?update_time(){?
?
????????//调用moment.js来格式化时间?
????????var?now?=?moment().format("HHmmss");?
?
????????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]]);?
?
????????var?date?=?moment().format("YYYY年MM月DD日");?
????????var?week?=?weekday[moment().format('d')];?
????????$(".date").html(date?+?'?'?+?week);?
?
?
????????//?每秒钟运行一次?
????????setTimeout(update_time,?1000);?
?
????})();?
});?