欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

行使jQuery和CSS3建造数字时钟(jQuery篇)

发布时间:2016-11-27  编辑:杨雨个人博客网站   点击:   

上一篇文章中,我们行使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);

    })();
});
本文地址:http://itbyc.com/web/javascript/13527.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1