使用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篇) 附源码下载的更多相关文章
- 分享一组很赞的 jQuery 特效【附源码下载】
作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些 ...
- 精选12个时尚的 CSS3 效果【附源码下载】
这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- HTML5与CSS3实例教程(第2版) 附源码 中文pdf扫描版
HTML5和CSS3技术是目前整个网页的基础.<HTML5与CSS3实例教程(第2版)>共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.这一版全面讲解了最新的HTML5和 ...
- jquery省市区三级联动(数据来源国家统计局官网)内附源码下载
很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...
- HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】
前言 由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现.[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础上修改的 ...
随机推荐
- 零开始:NetCore项目权限管理系统:登录授权
喜欢NetCore的朋友,欢迎加群QQ:86594082 源码地址:https://github.com/feiyit/SoaProJect 管理员的模型 namespace FytSoa.Core. ...
- AVFoundation - 拍照(Simple)
1:基础 /* 1:获取可用输入设备 AVCaptureDevice 2:设置输入设备: [AVCaptureDeviceInput deviceInputWithDevice:self.captur ...
- iterm2 恢复默认设置
如果你设置了Iterm2的默认字体,然后感觉不好看又忘记默认字体是什么的时候 执行如下命令,重新启动iTerm2即可: defaults delete com.googlecode.iterm2
- Chrome谷歌浏览器已停用不支持的扩展程序解决方法
在不能上外网的情况下解决该问题: http://www.liu16.com/post/Chrome_2447.html
- WebAPI Post接收数据
近日在写某开源商城的webapi接口,由于刚接触所以碰到某些问题,如post数据的接收啊等.在网上查询资料时给出了三种方式. 1.给多个数据对象封装成一个对象进行接收([frombody]标签只能用于 ...
- 【SQL查询】树结构查询
格式:SELECT ... FROM + 表名 WHERE + 条件3 START WITH + 条件1 CONNECT BY PRIOR + 条件2条件1: 表示从哪个节点开始查找, 也就是通过条件 ...
- 剑指offer二十九之最小的K个数
一.题目 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 二.思路 详解代码. 三.代码 import java.util. ...
- hive多表联合查询(GroupLens->Users,Movies,Ratings表)
hive (UserMovieRating)> create table if not exists Users( > UserID int co ...
- Mina的服务器
(一) package testMina; import java.io.IOException; import java.net.InetSocketAddress; import java.nio ...
- HUE配置文件hue.ini 的hdfs_clusters模块详解(图文详解)(分HA集群和非HA集群)
不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...