今天給大家?guī)?lái)一個(gè)可以與系統(tǒng)時(shí)間匹配的時(shí)鐘。
話(huà)不多說(shuō)，先上動(dòng)畫(huà)效果展示：
教程開(kāi)始：
一、先準(zhǔn)備需要的組件，
1、指針（秒針、分針、時(shí)針）大家可以用場(chǎng)舉行代替，也可以下載自己喜歡的樣式。
2、然后準(zhǔn)備圓形4個(gè)，前3個(gè)大小隨意，但是這3個(gè)圓形尺寸要一致，第四個(gè)要小一些，可以把指針尾部都蓋就可以。
3、動(dòng)態(tài)面板一個(gè)，state1，復(fù)制一個(gè)，state2，用于改變狀態(tài)。
4、幾個(gè)矩形或者文本標(biāo)簽都可以，用于獲取系統(tǒng)時(shí)間，以及分塊顯示時(shí)間。
5、文本標(biāo)簽，用于標(biāo)記3點(diǎn)6點(diǎn)9點(diǎn)12點(diǎn)，大家可以多做一些，把1~12點(diǎn)都寫(xiě)出來(lái)也可以。
6、組件樣式如果下：
二、開(kāi)始制作，
1、首先對(duì)動(dòng)態(tài)面板添加事件，載入時(shí)，設(shè)定動(dòng)態(tài)面板為next，向后循環(huán)1000毫秒（1000毫秒=1秒）如圖：
2、接下來(lái)我開(kāi)始獲取系統(tǒng)時(shí)間，這里需要用到一個(gè)函數(shù)，[[Now.toLocaleTimeString(“en-GB”)]]獲取后的格式 例 12:08:27，我們?cè)趧?dòng)態(tài)面板狀態(tài)改變時(shí)候增加事件為：設(shè)置文本那個(gè)長(zhǎng)條矩形為：[[Now.toLocaleTimeString(“en-GB”)]]如圖：
此時(shí)大家可以F5預(yù)覽一下，這樣就看見(jiàn)系統(tǒng)時(shí)間在變動(dòng)，1秒1秒的增加。如圖
3、接下來(lái)我們讓另外幾個(gè)矩形獲取這個(gè)長(zhǎng)矩形的小時(shí)，分鐘，秒，要用到substr函數(shù)，用于獲取指定字符串的第幾位，
然后還是在動(dòng)態(tài)面板上添加事件，狀態(tài)改變時(shí)，設(shè)定3個(gè)矩形分別為：[[LVAR1.substr(0,2)]]，[[LVAR1.substr(3,2)]]，[[LVAR1.substr(6,2)]]
意思是獲取上圖的09:52:14→substr(0,2)就是從第0位開(kāi)始到第2位也就是獲取的09在這矩形上，之后同上，就不一一解釋了。如圖：
此時(shí)F5效果如下：
現(xiàn)在我們已經(jīng)獲取到系統(tǒng)時(shí)間，并且已經(jīng)分塊顯示了，接下來(lái)我們要制作時(shí)鐘表盤(pán)了，以及讓時(shí)鐘指針都轉(zhuǎn)動(dòng)。
4、我們把3個(gè)圓形跟3個(gè)指針?lè)謩e組合起來(lái)（把圓形的填充顏色設(shè)置為空），指著的尾巴一定要在圓形的中心點(diǎn)位上，否則轉(zhuǎn)圈的時(shí)候可能回跑偏。如圖：
5、現(xiàn)在開(kāi)始對(duì)秒針，分針，時(shí)針，進(jìn)行轉(zhuǎn)圈設(shè)置，還是在面板狀態(tài)改變時(shí)添加事件：設(shè)定旋轉(zhuǎn)角度等于秒針*6（因?yàn)?0秒正好轉(zhuǎn)一圈，1圈=360度，秒針*6正好最大得到360度，也就是一圈）如圖：
然后設(shè)定分針旋轉(zhuǎn)為：分針一圈也是360度，所以也要用分針*6等于一圈，[[((LVAR1 LVAR2/60)*6).toFixed(0)]] ，但是我們要注意一個(gè)細(xì)節(jié)，秒針走動(dòng)的同時(shí)，分針也會(huì)跟隨移動(dòng)，1分鐘移動(dòng)距離不大，但是會(huì)動(dòng)，所以我們要用分針的角度 秒針/60的角度來(lái)判定，這個(gè).toFixed(0)是不保留小數(shù)的意思，如果保留了，分針旋轉(zhuǎn)會(huì)有問(wèn)題，大家可以自己測(cè)試一下。如圖：
接下來(lái)設(shè)定時(shí)針旋轉(zhuǎn)，因?yàn)槲覀兪?4小時(shí)，每12小時(shí)時(shí)針轉(zhuǎn)一圈，360/12=30度，也就是時(shí)針1小時(shí)要走30度，同理跟分針一樣，也要漸漸的旋轉(zhuǎn)，用到[[((LVAR1 LVAR2/60)*30).toFixed(0)]]，時(shí)針 分針/60然后*30度，不保留小數(shù)，如圖：
6、都設(shè)定完畢后，我們把這些簡(jiǎn)單移動(dòng)一下，都重疊在一起，把動(dòng)態(tài)面板跟長(zhǎng)矩形隱藏，看看效果吧。把表盤(pán)制作出來(lái)，小圓蓋在指針尾巴上，就可以了。大家可以根據(jù)自己的審美，更換表盤(pán)等。如圖：
按下F5，看看效果吧！加油各位小伙伴們。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。