基于jQuery和CSS3制作數(shù)字時(shí)鐘附源碼下載(jquery篇)

更新時(shí)間：2015年11月24日 14:40:48 投稿：mrr

本篇文章基于jquery讓數(shù)字時(shí)鐘真正的跑起來(lái)，實(shí)現(xiàn)一個(gè)帶有日期和星期的網(wǎng)頁(yè)版數(shù)字時(shí)鐘，效果非常逼真，感興趣的朋友一起看看吧

廢話不多說(shuō)了，先給大家展示下效果圖，感興趣的朋友繼續(xù)往下看哦

查看演示源碼下載

HTML

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

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

jQuery

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

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

$(function(){ 
 var clock = $('#clock'); 
 //定義數(shù)字?jǐn)?shù)組0-9 
 var digit_to_name = ['zero','one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; 
 //定義星期 
 var weekday = ['周日','周一','周二','周三','周四','周五','周六']; 
 var digits = {}; 
 //定義時(shí)分秒位置 
 var positions = [ 
  'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2' 
 ]; 
});

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

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

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

$(function(){ 
 ... 
 (function update_time(){ 
  //調(diào)用moment.js來(lái)格式化時(shí)間 
  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); 
  // 每秒鐘運(yùn)行一次 
  setTimeout(update_time, 1000); 
 })(); 
});

您可能感興趣的文章: