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篇) 附源码下载的更多相关文章

  1. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  2. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  3. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  4. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  5. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  6. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  7. HTML5与CSS3实例教程(第2版) 附源码 中文pdf扫描版

    HTML5和CSS3技术是目前整个网页的基础.<HTML5与CSS3实例教程(第2版)>共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.这一版全面讲解了最新的HTML5和 ...

  8. jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

    很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...

  9. HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】

    前言 由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现.[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础上修改的 ...

随机推荐

  1. 零开始:NetCore项目权限管理系统:登录授权

    喜欢NetCore的朋友,欢迎加群QQ:86594082 源码地址:https://github.com/feiyit/SoaProJect 管理员的模型 namespace FytSoa.Core. ...

  2. AVFoundation - 拍照(Simple)

    1:基础 /* 1:获取可用输入设备 AVCaptureDevice 2:设置输入设备: [AVCaptureDeviceInput deviceInputWithDevice:self.captur ...

  3. iterm2 恢复默认设置

    如果你设置了Iterm2的默认字体,然后感觉不好看又忘记默认字体是什么的时候 执行如下命令,重新启动iTerm2即可: defaults delete com.googlecode.iterm2

  4. Chrome谷歌浏览器已停用不支持的扩展程序解决方法

    在不能上外网的情况下解决该问题: http://www.liu16.com/post/Chrome_2447.html

  5. WebAPI Post接收数据

    近日在写某开源商城的webapi接口,由于刚接触所以碰到某些问题,如post数据的接收啊等.在网上查询资料时给出了三种方式. 1.给多个数据对象封装成一个对象进行接收([frombody]标签只能用于 ...

  6. 【SQL查询】树结构查询

    格式:SELECT ... FROM + 表名 WHERE + 条件3 START WITH + 条件1 CONNECT BY PRIOR + 条件2条件1: 表示从哪个节点开始查找, 也就是通过条件 ...

  7. 剑指offer二十九之最小的K个数

    一.题目 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 二.思路 详解代码. 三.代码 import java.util. ...

  8. hive多表联合查询(GroupLens->Users,Movies,Ratings表)

    hive (UserMovieRating)> create table if not exists Users(                      > UserID int co ...

  9. Mina的服务器

    (一) package testMina; import java.io.IOException; import java.net.InetSocketAddress; import java.nio ...

  10. HUE配置文件hue.ini 的hdfs_clusters模块详解(图文详解)(分HA集群和非HA集群)

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...