起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure教程：獲取驗證碼倒計時的實現(xiàn)
本文介紹了如何用Axure獲取驗證碼倒計時的實現(xiàn)的操作步驟，希望對你有所幫助。
預(yù)覽效果
（1）獲取驗證碼：
（2）倒計時：
（3）重新獲?。?/p>
所需元件
一個文本標(biāo)簽并將文字改為“10”，一個矩形轉(zhuǎn)換為動態(tài)面板并增加多一個面板。
操作步驟
（1）將“計時”矩形放在“提示”動態(tài)面板下面
（2）設(shè)置面板1內(nèi)的矩形文字為“獲取驗證碼”
（3）在面板2內(nèi)放置一塊相同大小的矩形，并設(shè)置矩形內(nèi)文字為“重新獲取”
（4）設(shè)置動態(tài)面板第一個交互——鼠標(biāo)單擊時
（5）設(shè)置動態(tài)面板第二個交互——狀態(tài)改變時（Case1）
（6）為該交互添加條件
（7）設(shè)置動態(tài)面板第三個交互——狀態(tài)改變時（Case2）
（8）并為該交互添加條件
（9）大功告成，接下來按F5預(yù)覽原型即可。
小記
1.這里解釋一下為什么設(shè)置動態(tài)面板的第一個交互——鼠標(biāo)單擊時，隱藏了動態(tài)面板后要讓動態(tài)面板每過1S循環(huán)切換State1->State2->State1。這個操作的目的是為了觸發(fā)第二、三個交互——狀態(tài)改變時，因為動態(tài)面板切換了，所以狀態(tài)改變了，那么系統(tǒng)在判斷到“計時”仍>“0”時就會自動減1，從10變成9，過1S又從9變8…以此類推，直到為0時，下一秒就顯示動態(tài)面板并顯示為State2，“重新獲取”矩形的所在面板。
2.以上就是許多網(wǎng)站和APP都會用到的關(guān)于用手機(jī)收取驗證碼時的倒計時的原型制作啦，學(xué)會這個原型，那么將來在你自己需要設(shè)計網(wǎng)站或APP原型時大概率都會用上。(??????)??太棒了！
本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash ，基于 CC0 協(xié)議
真棒！