基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)_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-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);
 })();
}); 

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery_css3时钟
jquery_css3
css3时钟、css3时钟翻页倒计时3d、html5 css3动态时钟、css3 数字时钟、css3 立体时钟翻页，以便于您获取更多的相关知识。