這個原型是作者根據(jù)上一篇文章《Axure教程：獲取驗證碼倒計時的實現(xiàn)》，發(fā)散思維想到去做的一個原型案例，在這里分享出來，希望可以幫助到一樣剛起步的產(chǎn)品小白。

如果該教程較難，建議先觀看我做的第一個倒計時（簡單版），操作步驟更為詳細(xì)：http://www.codemsi.com/rp/3133460.html。

開門見山，我們先來看看效果↓

預(yù)覽圖：

預(yù)覽網(wǎng)址：https://jxvo3f.axshare.com

所需元件

一個命名為“觸發(fā)器”的動態(tài)面板（兩個面板狀態(tài)）、一個命名為“秒”的矩形，并填入文字“10”、一個命名為“分”的矩形，并填入文字“01”、一個命名為“時”的矩形，并填入文字“01”、兩個“：”矩形、一個填充色為黃色的背景矩形。

操作步驟

（1）設(shè)置動態(tài)面板交互——載入時

這個交互的作用是一直觸發(fā)動態(tài)面板的下一個交互——狀態(tài)改變時。

（2）設(shè)置動態(tài)面板第二個交互——狀態(tài)改變時（Case 1）

這里就不列舉詳細(xì)操作步驟了，較為詳細(xì)的步驟就在我的開頭的文章里面有介紹。

Case1的作用是：“當(dāng)“秒”矩形內(nèi)的數(shù)值大于0時則自減1”。

（3）設(shè)置動態(tài)面板第三個交互——狀態(tài)改變時（Case 2）

Case2里多了一個條件，那么Axure如何設(shè)置多個條件呢？只需要在“編輯條件”里面再點(diǎn)擊一下紅圈里面的加號即可添加多一個條件了。

Case2的作用是：“當(dāng)“秒”矩形內(nèi)數(shù)值為0時，“分”矩形內(nèi)數(shù)值減1，“秒”矩形內(nèi)數(shù)值設(shè)為59”。

（4）設(shè)置動態(tài)面板第四個交互——狀態(tài)改變時（Case 3）

Case3的作用是：“當(dāng)“秒”矩形內(nèi)數(shù)值為0且“分”矩形內(nèi)數(shù)值也為0時，則“時”矩形內(nèi)數(shù)值減1，且“分”矩形數(shù)值設(shè)為59，“秒”矩形數(shù)值設(shè)為59”

（5）大功告成，按F5預(yù)覽看看效果

小記

（1）如果預(yù)覽時覺得看數(shù)值變化太慢了，可以把動態(tài)面板的交互——載入時的循環(huán)間隔時間設(shè)置為1ms。

（2）這個原型有一個缺陷，就是當(dāng)?shù)褂嫊r倒數(shù)到個位數(shù)時，無法顯示為“09、08、07”這樣子，在個位數(shù)前面補(bǔ)0，當(dāng)然簡單的替換方案就是在“時”“分”“秒”矩形前面加一個隱藏的0，并設(shè)置顯示時的條件為：“當(dāng)“時”“分”“秒”矩形內(nèi)的數(shù)值低于10時顯示并在大于10時隱藏即可”。但是如何通過函數(shù)實現(xiàn)，期望有大佬可以來講解一下。

（3）該原型的適用場景有很多，比如說現(xiàn)在許多商城的限時搶購都會用到時分秒的倒計時。學(xué)會了就可以應(yīng)用在這些場景里面了(??????)??

（4）正式使用時，記得要將僅僅用來實現(xiàn)倒計時功能的動態(tài)面板隱藏掉。這里我為了展示效果所以沒有隱藏。

（5）這個原型是根據(jù)我的上一篇文章《Axure教程：獲取驗證碼倒計時的實現(xiàn)》，發(fā)散思維想到去做的一個原型案例，在這里分享出來，希望可以幫助到和我一樣剛起步的產(chǎn)品小白。

本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議