相思资源网 Design By www.200059.com

废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦

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

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)”

暂无基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。