起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure 8.0 獲取驗證碼倒計時
前幾天做一個移動端App原型，做注冊界面是需要有手機短信驗證碼驗證，想做出那種點擊發送短信驗證碼，出現倒計時，參考了很多文章，做出了那種效果。剛學做的比較LOW，大神路過別噴，請大家指正。
分析
要做到這種效果，需要清楚三點
- 點擊發送驗證碼后開始出現倒計時，倒計時開始，按鈕不可點擊；
- 倒計時如何實現；
- 倒計時結束后返回發送驗證碼，再次點擊再次出現倒計時。
元件準備
拖入一個文本輸入框“numberinput”，兩個按鈕“sendinfor”和“background”一個文本標簽“time”設置為10。（文本標簽“time”和另一個按鈕在“background”組合在一起放到“sendinfor”下面）
將按鈕“sendinfor”轉換為動態面板“round”，復制狀態增加一個“state2”。
交互
首先實現鼠標點擊發送按鈕，出現倒計時。因為倒計時是在動態面板“round”下面，所以只需要隱藏動態面板“round”就行。
為動態面板round添加“鼠標單擊時”事件，設置“顯示/隱藏”，隱藏動態面板“round”，此時倒計時出現，只不過沒有效果。
倒計時如何實現？
我們利用動態面板的狀態循環，循環一次，“time”數值減1。
雙擊動態面板round的“狀態改變時”事件，在彈出的窗口中點擊“添加條件”，設置“元件文字”time > 值 0。
如果“time”數值滿足上述條件，為文本標簽“time”設置文字，讓其數值減一。
前面為“round”添加了“鼠標點擊時”事件，我們只需要在隱藏“round”動作前添加一個動作“設置面板狀態”，讓“round”向后循環，循環間隔800ms，勾選首個狀態延時800ms后切換。
做完上面的步驟，我們按F5預覽一下，鼠標點擊發送按鈕，倒計時開始，出現了我們需要效果：
但是“time”減為0后，沒有返回發送驗證碼。
分析一下，前面當“time”數值大于0的時候動態面板狀態改變，改變一次“time”數值減1，減到0后，動態面板也不再循環。所以我們增加一個條件，當“time”數值=0時，我們設置“time”值為10，顯示“round”。
再次按F5預覽，點擊按鈕，我們需要的效果都已實現。
本人小白，寫的有點亂，有任何疑問，歡迎交流。
原型預覽地址：https://9e4chn.axshare.com
原型下載：https://pan.baidu.com/s/1B5NKVjdu8dodNTNiqnDzHA /密碼bdic
參考文章：https://blog.csdn.net/chali22/article/details/77963069
本文由 @就這樣吧！ 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
修改一下，當我們在瀏覽器中預覽時，第一次點擊倒計時沒有問題，但是多點幾次發現時間不是從10開始減，每次都不一樣，這是因為我們在“time”數值為0時，沒有將面板循環停止，面板一直在循環，而每一次面板循環，都會讓“time”數值減1，所以只需要在“time”數值為0時，添加讓面板“round”停止循環，問題就解決了。