摘要:背景最近在學(xué)習(xí),看到了一個小案例,通過自己的學(xué)習(xí),動手實現(xiàn)了它,現(xiàn)在把它分享出來。效果圖實現(xiàn)過程首先我們需要在頁面中寫出一個靜態(tài)的鐘表效果。并對其進(jìn)行簡單樣式設(shè)置。
背景:最近在學(xué)習(xí)CSS3,看到了一個小案例,通過自己的學(xué)習(xí),動手實現(xiàn)了它,現(xiàn)在把它分享出來。
效果圖 實現(xiàn)過程1.首先我們需要在頁面中寫出一個靜態(tài)的鐘表效果。首先我們需要一個表盤div wrap 對其進(jìn)行簡單的樣式設(shè)置,用border-radius屬性將其設(shè)置成圓形。
#wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border- radius:50%; position:relative;}
2.接下來我們用ul和li來寫表盤中的刻度,對其進(jìn)行簡單的樣式設(shè)置。其中需要注意的是,我們用 -webkit-transform-origin:center 100px;來設(shè)置我們的旋轉(zhuǎn)基點。然后利用 -webkit-transform: rotate(0);讓我們的li旋轉(zhuǎn)相應(yīng)的角度形成相應(yīng)的刻度。
3.其中我們設(shè)計到了css3的選擇器nth-of-type() ,它規(guī)定其屬于其父元素的第幾個li元素。
當(dāng)然,我們不可能將表盤的刻度都統(tǒng)統(tǒng)去設(shè)置li的樣式去完成。我們后面需要用js去渲染它。
在渲染之前,我們需要去寫上我們的秒針、分針、時針。分別是div hour、min、sec,并且我們對其進(jìn)行樣式的設(shè)置。為了美化一下,我們再寫一個div icon,圓點。并對其進(jìn)行簡單樣式設(shè)置。
#hour{width:6px; height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;} #min{width:4px; height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;} #sec{width:2px; height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;} .icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}
4.接下來我們來寫一下讓鐘表動起來的JavaScript,首先用js去獲取各個div。
var oList=document.getElementById("list");//獲取到刻度 var oCss=document.getElementById("css"); var oHour=document.getElementById("hour");//獲取時針 var oMin=document.getElementById("min");//獲取分針 var oSec=document.getElementById("sec");//獲取秒針 var oLi=""; var sCss="";
5.接下來去渲染表盤的刻度。
for (var i=0;i<60;i++) { //一個表盤總共是60個刻度 sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}"; oLi+=""; }; oList.innerHTML=oLi; oCss.innerHTML+=sCss;//表盤刻度渲染完成
6.接下來我們?nèi)懸粋€鐘表表針根據(jù)時間變動的函數(shù),先利用new Date()獲取時間,然后通過去改變表針的樣式去讓表針根據(jù)時間去轉(zhuǎn)動,秒針一秒相當(dāng)于旋轉(zhuǎn)6度,分鐘一秒相當(dāng)轉(zhuǎn)動6度,時針轉(zhuǎn)動1秒相當(dāng)于轉(zhuǎn)動30度。
function toTime(){ var oDate=new Date();//獲取當(dāng)前時間 var iSec=oDate.getSeconds();//獲取當(dāng)前秒 var iMin=oDate.getMinutes()+iSec/60;//獲取當(dāng)前分 var iHour=oDate.getHours()+iMin/60;//獲取當(dāng)前時 oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒針轉(zhuǎn)動角度1秒6度 (表盤一圈360度一圈60秒所以一秒6度) oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分鐘轉(zhuǎn)動角度1分6度 (表盤一圈360度一圈60分所以一分6度) oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//時針轉(zhuǎn)動角度一小時30度(表盤一圈360度一圈12小時所以一小時30度) };
7.最后我們來開一個定時器,讓函數(shù)隔一秒執(zhí)行一次。
toTime(); setInterval(toTime,1000);
至此一個鐘表效果就寫完了,下面是全部源代碼
效果源碼鐘表
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51950.html
摘要:背景最近在學(xué)習(xí),看到了一個小案例,通過自己的學(xué)習(xí),動手實現(xiàn)了它,現(xiàn)在把它分享出來。效果圖實現(xiàn)過程首先我們需要在頁面中寫出一個靜態(tài)的鐘表效果。并對其進(jìn)行簡單樣式設(shè)置。 背景:最近在學(xué)習(xí)CSS3,看到了一個小案例,通過自己的學(xué)習(xí),動手實現(xiàn)了它,現(xiàn)在把它分享出來。 效果圖 showImg(https://segmentfault.com/img/bV5hBr?w=457&h=366); 實現(xiàn)...
摘要:背景最近在學(xué)習(xí),看到了一個小案例,通過自己的學(xué)習(xí),動手實現(xiàn)了它,現(xiàn)在把它分享出來。效果圖實現(xiàn)過程首先我們需要在頁面中寫出一個靜態(tài)的鐘表效果。并對其進(jìn)行簡單樣式設(shè)置。 背景:最近在學(xué)習(xí)CSS3,看到了一個小案例,通過自己的學(xué)習(xí),動手實現(xiàn)了它,現(xiàn)在把它分享出來。 效果圖 showImg(https://segmentfault.com/img/bV5hBr?w=457&h=366); 實現(xiàn)...
摘要:有一天看到旋轉(zhuǎn)這個屬性突發(fā)奇想的寫了一個鐘表沒做瀏覽器兼容來一起看看是怎么寫的吧先給個成品圖最終結(jié)果是個樣子的動態(tài)的首先思考了一下頁面的布局大致需要層最底層是一個表盤的背景圖然后其余層分別是時針分針秒針的圖層代碼如下變量名是隨便起的不要有一天看到css3旋轉(zhuǎn)這個屬性,突發(fā)奇想的寫了一個鐘表(沒做瀏覽器兼容),來一起看看是怎么寫的吧! 先給個成品圖,最終結(jié)果是個樣子的(動態(tài)的). ...
摘要:緊接著昨天的實例,第二個是原生實現(xiàn)鐘表特效。然后根據(jù)鐘表中,角度和時間的算法關(guān)系。需要注意的是,我的算法和之前的算法不一樣,這個可以根據(jù)自己的想法實現(xiàn),實現(xiàn)的效果是不一樣的。首先知道鐘表是,然后根據(jù)一個小時,來算出各個針的角度。 緊接著昨天的實例,第二個是原生js實現(xiàn)鐘表特效。首先介紹下大致思路,首先要用css把時針分針和秒針畫出來。然后根據(jù)鐘表中,角度和時間的算法關(guān)系。 設(shè)置角度。 ...
摘要:緊接著昨天的實例,第二個是原生實現(xiàn)鐘表特效。然后根據(jù)鐘表中,角度和時間的算法關(guān)系。需要注意的是,我的算法和之前的算法不一樣,這個可以根據(jù)自己的想法實現(xiàn),實現(xiàn)的效果是不一樣的。首先知道鐘表是,然后根據(jù)一個小時,來算出各個針的角度。 緊接著昨天的實例,第二個是原生js實現(xiàn)鐘表特效。首先介紹下大致思路,首先要用css把時針分針和秒針畫出來。然后根據(jù)鐘表中,角度和時間的算法關(guān)系。 設(shè)置角度。 ...
閱讀 3212·2023-04-25 18:43
閱讀 891·2021-11-24 09:39
閱讀 1361·2021-10-14 09:43
閱讀 3890·2021-09-22 15:58
閱讀 1899·2019-08-29 17:18
閱讀 409·2019-08-29 14:14
閱讀 3077·2019-08-29 13:01
閱讀 1614·2019-08-29 12:33