基于jquery和CSS3 (jQuery)的源代码下载制作数字钟

别废话，先给你看效果图，感兴趣的朋友会继续往下看。

查看演示源下载。

超文本标记语言

它与上一篇文章的HTML结构相同：使用jQuery和CSS3制作一个数字时钟(CSS3)，只是有一个额外的日期来显示日期和星期。

div id=' clock ' class=' light ' div class=' display ' div class=' date '/div div class=' digits '/div/div/div jQuery

CSS代码请参考上一篇文章。本文不再赘述，而是直接看jQuery代码。

首先，我们定义参数，一个用于调用数字的类名数组，中文周名，以及小时、分钟和秒的位置。

$(function(){ var clock=$(' # clock ')；//定义数字数组0-9 vardigit _ to _ name=['零'，'一'，'二'，'三'，'四'，'五'，'六'，'七'，'八'，'九']；//定义周var weekday=['Sunday '，'周一'，'周二'，'周三'，'周四'，'周五'，'周六']；var位数={ }；//定义时、分、秒位置varpositions=['h1 '，' H2 '，' 3360 '，' m1 '，' m2 '，' 3360 '，' S1 '，' S2 ']；});然后构建数字时钟的小时和分钟。在上一篇文章中，我们将数字钟的html结构直接放置在html中，但是现在我们使用jQuery来处理时钟的显示，并通过append()方法来构建数字钟。

var digit_holder=clock.find('。数字')；$.每个(positions，function(){ if(this==' : '){ digit _ holder . append(' div class=' dots ')；} else { var pos=$(' div ')；for(var I=1；i8；I){ pos . append(' span class=' d ' I ' ')；}位数[this]=pos；digit _ holder . append(pos)；} });最后，我们应该让时钟运行。update_time()函数每秒调用一次。在update_time()中，我们首先用moment.js格式化时间，关于moment.js的介绍，请参考本文：用moment.js轻松管理日期和时间，然后根据当前的时、分、秒，分别设置时、分、秒数字的类属性，即显示当前的时、分、秒数字。然后继续用moment.js格式化日期和星期，最后完成手机数字钟。请参见以下代码：

$(function(){ 0.(函数update _ time(){//调用moment.js来格式化time var now=moment()。格式(' 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日期=时刻()。格式(' YYYY MM月DD日')；var week=weekday[moment()。格式(' d ')]；$('.日期')。html(日期' '周)；//每秒运行一次settimeout(update _ time，1000)；})();});