和模擬數(shù)字時(shí)鐘同樣的場(chǎng)景，秒表計(jì)數(shù)器是另外一個(gè)類似實(shí)現(xiàn)方式，只是我們不是取的系統(tǒng)時(shí)間，而是自己從0開(kāi)始計(jì)時(shí)，并且要處理秒鐘到分鐘的換算。

這個(gè)例子里主要就是實(shí)現(xiàn)對(duì)變量的控制，以及如何處理事件，相關(guān)知識(shí)點(diǎn)如下：

1. 定義全局變量，實(shí)現(xiàn)對(duì)變量的計(jì)算控制
2. 通過(guò)組件的顯示/隱藏事件來(lái)實(shí)現(xiàn)循環(huán)處理
3. 對(duì)事件分支的處理，對(duì)數(shù)字的秒鐘到分鐘的轉(zhuǎn)換。

OK，現(xiàn)在開(kāi)始。

添加形狀

設(shè)置背景色為黑色，文字顏色為綠色，并將它轉(zhuǎn)換成動(dòng)態(tài)面板，模擬計(jì)時(shí)器的場(chǎng)景

添加全局變量

其中hours、minutes、seconds、msec是用來(lái)保存格式化的時(shí)間字符串的，而nHours、nMinutes、nSeconds、nMsec則是用來(lái)計(jì)算時(shí)間，并換算的

添加控制組件

添加幾個(gè)形狀，分別用來(lái)控制時(shí)、分、秒、毫秒，以及用來(lái)控制總體顯示的all

添加事件

添加動(dòng)態(tài)面板的載入事件處理，先隱藏所有的控制組件，這樣會(huì)先觸發(fā)各個(gè)控制組件的隱藏事件，開(kāi)始顯示處理

在分、秒、毫秒組件上添加事件支持（這里沒(méi)增加對(duì)小時(shí)的處理了，方法類似），我們以秒鐘組件上的事件為例，其它的請(qǐng)下載源文件后查看。

1. 在小10秒時(shí)，為了格式化時(shí)間顯示，在字符串前補(bǔ)了個(gè)0
2. 在等于59秒時(shí)，分鐘開(kāi)始需要加1了，秒鐘重置為0
3. 等待1000毫秒，即1秒鐘
4. 隱藏當(dāng)前組件，這樣會(huì)觸屏隱藏事件，轉(zhuǎn)到隱藏事件處理上

注意：隱藏事件和顯示事件基本相同，除了將隱藏組件改為顯示組件外

看一下all組件上的事件，它只負(fù)責(zé)用來(lái)顯示完整的格式化時(shí)間，通過(guò)變量如下拼接顯示：

[[minutes]]:[[seconds]]:[[msec]]

按下F5鍵，在本地運(yùn)行一下看看效果。

點(diǎn)擊這里查看在線顯示哦。（里面有源文件可下載）

本文由 @Axure原型設(shè)計(jì)工場(chǎng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。