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


Posted in Javascript onNovember 24, 2015

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

基于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代码请参照上一篇文章,本文不再??拢?苯涌?Query代码。

首先我们定义参数,定义用来调用数字的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); 
 })(); 
});
Javascript 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
js中小数转换整数的方法
Jan 26 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
基于jquery实现简单的手风琴特效
Nov 24 #Javascript
jQuery插件实现无缝滚动特效
Nov 24 #Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 #Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 #Javascript
javascript实现加载xml文件的方法
Nov 24 #Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 #Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 #Javascript
You might like
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python实现log日志的示例代码
2018/04/28 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
竟聘演讲稿范文
2013/12/31 职场文书
家长通知书教师评语
2014/04/17 职场文书
八项规定对照检查材料
2014/08/31 职场文书
房屋维修协议书范本
2014/09/25 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书