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