废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦
查看演示 源码下载
HTML
和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的。
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(''); } else{ var pos = $(''); for(var i=1; i<8; i++){ pos.append(''); } 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); })(); });
写下你的评论吧 !推荐阅读
本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]蜡笔小新 2023-12-14 15:52:03 本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]蜡笔小新 2023-12-14 14:37:52 本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]蜡笔小新 2023-12-13 20:01:16 本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]蜡笔小新 2023-12-13 13:58:25 本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]蜡笔小新 2023-12-13 10:50:43 本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]蜡笔小新 2023-12-13 06:02:20 Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]蜡笔小新 2023-12-12 15:59:36 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]蜡笔小新 2023-12-12 12:45:59 本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]蜡笔小新 2023-12-11 12:06:41 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]蜡笔小新 2023-12-14 13:11:00 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]蜡笔小新 2023-12-13 21:31:18 原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]蜡笔小新 2023-12-13 19:35:25 1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]蜡笔小新 2023-12-13 18:03:01 winnie198808616这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1Java调取创蓝253短信验证码的实现代码
- 2Struts2学习手册之文件上传基础教程
- 3Spring 整合多个配置文件的方法
- 4使用IDEA创建SpringBoot项目的方法步骤
- 5深入讲解spring boot中servlet的启动过程与原理
- 6SpringBoot集成slf4j+log4j2的示例代码
- 7spring+maven实现邮件发送
- 8java编程实现多人聊天室功能
- 9java转换字符串编码格式的方法
- 10SpringBoot项目不占用端口启动的方法
- 11java使用poi导出Excel的方法
- 1210道springboot常见面试题
- 13SSH原理及两种登录方法图文详解
- 14详解Spring Cloud Finchley版中Consul多实例注册的问题处理
- 15详解Spring Boot应用的启动和停止(start启动)
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有