使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
来源:互联网 发布:淘宝网丝绒长裙 编辑:程序博客网 时间:2024/06/07 20:58
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); })(); });
下载源码
0 0
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
- 使用jQuery和CSS3制作数字时钟(CSS3篇)
- 如何用jQuery和CSS3制作数字时钟
- 20个最炫HTML5,jQuery和CSS3下拉菜单制作教程(附示例/源码)
- 使用JQuery加载XML文件中的数据【附源码下载】
- jquery+css3时钟
- 1、使用CSS3和jQuery制作的水平时间轴
- 30 个 jQuery & CSS3 加载动画和进度栏插件(附免积分下载地址)
- jQuery制作时间闹铃带数字时钟显示
- jQuery+css3网页时钟效果
- css3 + jquery模拟时钟效果
- 数字时钟 (JavaScript ,JQuery)
- html5+jQuery实现数字时钟/模拟时钟
- 14 个使用 jQuery 开发的模拟、数字时钟
- 使用DS3231SN制作数字时钟
- 使用jquery和css3.0编写菜单
- 如何使用jQuery和CSS3创建日历
- 用css3和jQuery制作精美的表单
- nginx安装和域名转换配置
- numix-cicle圆形图标
- cell分割线左对齐,不起作用?用下边的方法
- 在MAC上搭建自己的交互式网站
- 嫡狗胺仆乃只呕傧
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
- 漫步云端:CoreOS实践指南(一)
- 【转】winform窗体间传值
- ubuntu12.04开启Samba服务
- Haproxy+keepalived安装配置
- 修改linux虚拟机克隆时网卡变成eth1
- linux虚拟机新增磁盘识别方法
- nginx开机启动脚本
- Windows Server 2012 R2 无法启用Microsoft .NET Framework 3.5 功能