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

jQuery
CSS代码请参照上一篇文章，本文不再啰嗦，直接看jQuery代码。
首先我们定义参数，定义用来调用数字的class名称数组，定义中文星期名称，定义时分秒的位置。

$（function（）{var clock = $（"#clock"）;//定义数字数组0-9var 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）;}）（）; }）;