基于CSS3+jQuery動(dòng)態(tài)時(shí)鐘制作的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹基于CSS3+jQuery動(dòng)態(tài)時(shí)鐘制作的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)輝南免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

這個(gè)時(shí)鐘的HTML標(biāo)記非常簡(jiǎn)單，只用了ul列表，每一個(gè)列表項(xiàng)（li）分別對(duì)應(yīng)著3根運(yùn)動(dòng)指針，并且給其分配相應(yīng)的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代碼也是非常簡(jiǎn)單，由于3根運(yùn)動(dòng)指針尺寸相同，并且是從同一個(gè)位置開(kāi)始運(yùn)動(dòng)，所以我們?yōu)榱撕?jiǎn)化代碼就將它們的代碼寫(xiě)在一起了。為了能讓時(shí)鐘內(nèi)部的指 針實(shí)現(xiàn)絕對(duì)定位（absolutely position）我們將ul設(shè)成相對(duì)定位（relativeposition）。
好了，下面我們的jQuery就要上場(chǎng)了。
The jQuery JavaScript
這里Javascript主要完成以下工作：
獲取當(dāng)前的時(shí)間
計(jì)算并添加每個(gè)元素的CSS樣式（旋轉(zhuǎn)角度）
周期性地設(shè)置CSS樣式
獲取時(shí)間
你也許會(huì)將PHP中的時(shí)間和日期等同起來(lái)，剛開(kāi)始的時(shí)候我的第一想法也是利用PHP，然而后來(lái)我發(fā)現(xiàn)javascript中也有構(gòu)造日期和時(shí)間的功能函數(shù)。只是需要注意的是javascript獲取的是本地時(shí)間并不是服務(wù)器時(shí)間。
首先我將用Date()函數(shù)獲取日期信息并將其賦給一個(gè)變量，我們可以通過(guò)GetSeconds(), GetMinutes()或GetHours()獲取3根指針的信息，如下代碼：

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

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

請(qǐng)注意這里我們用了Javascript中的setInterval函數(shù)，這個(gè)函數(shù)每秒鐘都會(huì)執(zhí)行一次。一些獲取時(shí)間的變量也在這個(gè)函數(shù)中，所以每次調(diào)用都會(huì)自動(dòng)更新時(shí)間值。
這樣，我們的時(shí)鐘就可以工作了。

以上是“基于CSS3+jQuery動(dòng)態(tài)時(shí)鐘制作的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：基于CSS3+jQuery動(dòng)態(tài)時(shí)鐘制作的示例分析-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://bm7419.com/article8/dihgip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、外貿(mào)建站、營(yíng)銷型網(wǎng)站建設(shè)、域名注冊(cè)、靜態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)