怎么使用jQuery和CSS3制作數(shù)字時鐘

這篇文章主要講解了“怎么使用jQuery和CSS3制作數(shù)字時鐘”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么使用jQuery和CSS3制作數(shù)字時鐘”吧！

上一篇文章中，我們使用CSS3制作了一個漂亮的數(shù)字時鐘，本文將緊接上一篇文章內(nèi)容，結(jié)合jQuery來讓數(shù)字時鐘真正跑起來，實現(xiàn)一個帶有日期和星期的真正網(wǎng)頁版數(shù)字時鐘。

HTML

和上一篇文章：使用jQuery和CSS3制作數(shù)字時鐘(CSS3篇)一樣的HTML結(jié)構(gòu)，只是多了個>date用來展示日期和星期的。

<p id="clock" class="light"> <p class="display"> <p class="date"></p> <p class="digits"></p> </p> </p>

jQuery

CSS代碼請參照上一篇文章，本文不再啰嗦，直接看jQuery代碼。

首先我們定義參數(shù)，定義用來調(diào)用數(shù)字的class名稱數(shù)組，定義中文星期名稱，定義時分秒的位置。

$(function(){    var clock = $('#clock'); //定義數(shù)字數(shù)組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'    ]; });

然后構(gòu)建數(shù)字時鐘的時分秒。在上一篇文章中我們是直接在html中放置了數(shù)字時鐘的html結(jié)構(gòu)，而現(xiàn)在我們使用jQuery來處理時鐘的展示，通過append()方法來構(gòu)建數(shù)字時鐘。

   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);        }    });

最后，我們要讓時鐘跑起來。每秒鐘調(diào)用一次update_time()函數(shù)，在update_time()中，我們先用moment.js來格式化時間，關(guān)于moment.js的介紹請參照本站文章：使用moment.js輕松管理日期和時間。然后根據(jù)當前時分秒，分別設(shè)置時分秒數(shù)字的class屬性，即顯示當前時分秒數(shù)字。接著繼續(xù)使用moment.js來格式化日期和星期，最終完成了會走動的數(shù)字時鐘，請看下面代碼：

$(function(){ ...    (function update_time(){        //調(diào)用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制作數(shù)字時鐘”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對怎么使用jQuery和CSS3制作數(shù)字時鐘這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！