您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了“怎么使用jQuery和CSS3制作数字时钟”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么使用jQuery和CSS3制作数字时钟”吧！
上一篇文章中，我们使用CSS3制作了一个漂亮的数字时钟，本文将紧接上一篇文章内容，结合jQuery来让数字时钟真正跑起来，实现一个带有日期和星期的真正网页版数字时钟。
和上一篇文章：使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构，只是多了个>date用来展示日期和星期的。
<p id="clock" class="light">
<p class="display">
<p class="date"></p>
<p class="digits"></p>
</p>
</p>
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 = [
'h2', 'h3', ':', 'm1', 'm2', ':', 's1', 's2'
];
});
然后构建数字时钟的时分秒。在上一篇文章中我们是直接在html中放置了数字时钟的html结构，而现在我们使用jQuery来处理时钟的展示，通过append()方法来构建数字时钟。
var digit_holder = clock.find('.digits');
$.each(positions, function(){
if(this == ':'){
digit_holder.append('<p class="dots">');
}
else{
var pos = $('<p>');
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.h2.attr('class', digit_to_name[now[0]]);
digits.h3.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和CSS3制作数字时钟这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。