和模擬數字時鐘同樣的場景，秒表計數器是另外一個類似實現方式，只是我們不是取的系統時間，而是自己從0開始計時，并且要處理秒鐘到分鐘的換算。

這個例子里主要就是實現對變量的控制，以及如何處理事件，相關知識點如下：

1. 定義全局變量，實現對變量的計算控制
2. 通過組件的顯示/隱藏事件來實現循環處理
3. 對事件分支的處理，對數字的秒鐘到分鐘的轉換。

OK，現在開始。

添加形狀

設置背景色為黑色，文字顏色為綠色，并將它轉換成動態面板，模擬計時器的場景

添加全局變量

其中hours、minutes、seconds、msec是用來保存格式化的時間字符串的，而nHours、nMinutes、nSeconds、nMsec則是用來計算時間，并換算的

添加控制組件

添加幾個形狀，分別用來控制時、分、秒、毫秒，以及用來控制總體顯示的all

添加事件

添加動態面板的載入事件處理，先隱藏所有的控制組件，這樣會先觸發各個控制組件的隱藏事件，開始顯示處理

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

1. 在小10秒時，為了格式化時間顯示，在字符串前補了個0
2. 在等于59秒時，分鐘開始需要加1了，秒鐘重置為0
3. 等待1000毫秒，即1秒鐘
4. 隱藏當前組件，這樣會觸屏隱藏事件，轉到隱藏事件處理上

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

看一下all組件上的事件，它只負責用來顯示完整的格式化時間，通過變量如下拼接顯示：

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

按下F5鍵，在本地運行一下看看效果。

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

本文由 @Axure原型設計工場 原創發布于人人都是產品經理?，未經許可，禁止轉載。