這篇文章主要介紹基于CSS3+jQuery動態時鐘制作的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

專注于為中小企業提供成都做網站、成都網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業輝南免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了上千余家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

Hi，大家好，我叫Toby Pitman，Chris曾邀請我寫一篇關于最近我在論壇上發的一些實驗成果，于是當我在WebKit blog和saw an article上看一些新的CSS3動畫時，有一個rotate屬性深深地吸引了我的眼球，于是就開始著手寫這篇文章了。我當時就在思考什么東西可以在網頁上旋轉呢（貌似GIF動畫圖片可以），于是我有個點子--是的，時鐘不就是可以旋轉的嗎！開始！
CSS3 Transform:rotate
Transform:rotate是CSS3的一個新特性，它可以讓你...當然，是實現一些旋轉的玩意兒啦。Transform也可以讓你在網頁上實現縮放、傾斜、移動對象。而且上面的這些都可以通過Transition屬性實現動畫效果。
聽起來很熟悉么？是的，當然，和以前一樣，我們將依然結合jQuery來實現頁面上元素的動畫效果。因為使用jQuery可以方便的操作CSS從而 得到動畫效果。聯想一下a:hover效果，你就會對如何實現這個例子產生一些想法。它遠沒有jQuery和Mootools那么強大，但已經足夠做一些 很酷的東西了。
請注意：這個時鐘例子只能運行在Firefox 3.1+、Safari 3+和Chrome瀏覽器上。
時鐘圖片
首先，我們需要準備一些圖片來作為時鐘的圖形界面。這里我們用一張鐘盤圖片和三張指針圖片，其中運動的指針我們是用photoshop切割出來的600×30的圖片，并將其豎直放置。然后利用rotate屬性讓其繞中心點旋轉。當然，指針使用的是透明的PNG格式圖片。HTML標記

這個時鐘的HTML標記非常簡單，只用了ul列表，每一個列表項（li）分別對應著3根運動指針，并且給其分配相應的id，代碼如下：

<ul id="clock">
<li id="sec"></li>
<li id="hour"></li>
<li id="min"></li>
</ul>

CSS代碼

#clock {
position: relative;
width: 600px;
height: 600px;
margin: 20px auto 0 auto;
background: url(clockface.jpg);
list-style: none;
}
#sec, #min, #hour {
position: absolute;
width: 30px;
height: 600px;
top: 0px;
left: 285px;
}
#sec {
background: url(sechand.png);
z-index: 3;
}
#min {
background: url(minhand.png);
z-index: 2;
}
#hour {
background: url(hourhand.png);
z-index: 1;
}

CSS代碼也是非常簡單，由于3根運動指針尺寸相同，并且是從同一個位置開始運動，所以我們為了簡化代碼就將它們的代碼寫在一起了。為了能讓時鐘內部的指 針實現絕對定位（absolutely position）我們將ul設成相對定位（relativeposition）。
好了，下面我們的jQuery就要上場了。
The jQuery JavaScript
這里Javascript主要完成以下工作：
獲取當前的時間
計算并添加每個元素的CSS樣式（旋轉角度）
周期性地設置CSS樣式
獲取時間
你也許會將PHP中的時間和日期等同起來，剛開始的時候我的第一想法也是利用PHP，然而后來我發現javascript中也有構造日期和時間的功能函數。只是需要注意的是javascript獲取的是本地時間并不是服務器時間。
首先我將用Date()函數獲取日期信息并將其賦給一個變量，我們可以通過GetSeconds(), GetMinutes()或GetHours()獲取3根指針的信息，如下代碼：

var seconds = new Date().getSeconds();

上面的代碼會返回一個0到59的數字并將其分配給seconds變量。
獲取角度
接下來我將計算每根指針的角度。我們將每一周分成60等分，所以只要360/60就得到每一份是6，這意味著每一秒鐘或者每一分鐘指針都將前進6度的角度。我們將計算結果保存到另一個變量中去，代碼如下：
var sdegree = seconds * 6;
對于時針的情況有點不同，因為每一個周期是12等分的，所以每小時時針前進的角度是30度：360/12=30。既然這樣如果時針按這個增量運動那就簡單 了，可是卻不是這么簡單的。它要根據分針的值運動一小段距離，比如3:30的話時針會在3和4的中間，然而我們該如何來做呢，請看下面的代碼：
var hdegree = hours * 30 + (mins / 2);
基本上我們需要在hour后面加上分鐘數除以2的值，該值在0.5到29.5之間（rotate屬性支持浮點小數值）。
例如：
2.40 將得到: 2 * 30 = 60 degrees + 40 / 2 = 20 degrees --------- --- ---------- hdegree = 80 degrees
設置樣式
下面是CSS3 rotate的CSS樣式表代碼：
#sec {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
這里我們改用jQuery來動態添加上面的樣式：
$("#sec").css({"-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"});
這里我們的一個問題是如何將'sdegree'變量替換樣式表中的45deg，可以這樣做：
var srotate = "rotate(" + sdegree + "deg)";
jquery代碼就修改成如下：
$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
將所有代碼整合起來
所有的jQuery代碼如下：

$(document).ready(function() {
setInterval( function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";
$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
}, 1000 );
setInterval( function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";
$("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
}, 1000 );
setInterval( function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";
$("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
}, 1000 );
});

請注意這里我們用了Javascript中的setInterval函數，這個函數每秒鐘都會執行一次。一些獲取時間的變量也在這個函數中，所以每次調用都會自動更新時間值。
這樣，我們的時鐘就可以工作了。

以上是“基于CSS3+jQuery動態時鐘制作的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

文章名稱：基于CSS3+jQuery動態時鐘制作的示例分析-創新互聯
當前路徑：http://m.newbst.com/article8/dihgip.html

成都網站建設公司_創新互聯，為您提供網站營銷、外貿建站、營銷型網站建設、域名注冊、靜態網站、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯