溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么使用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
