現(xiàn)在很多網(wǎng)站都會(huì)使用短信驗(yàn)證碼，該怎么使用axure設(shè)計(jì)一個(gè)帶有倒計(jì)時(shí)的短信驗(yàn)證碼呢？下面我們就來(lái)看看詳細(xì)的教程。

要實(shí)現(xiàn)倒計(jì)時(shí)的功能在AXURE中需要借助兩個(gè)元件配合才能完成，一個(gè)元件是“獲取短信驗(yàn)證碼”的按鈕；另一個(gè)元件是動(dòng)態(tài)面板；同時(shí)還需要一個(gè)變量；變量在這里相當(dāng)于一個(gè)計(jì)時(shí)器，我們先把變量設(shè)置為60時(shí)，一旦啟動(dòng)了，就從60一直倒計(jì)時(shí)到0；

1、拖一個(gè)矩形，設(shè)置好長(zhǎng)寬高，并命名為SendSMS；

2、拖一個(gè)動(dòng)態(tài)面板，隨便放一個(gè)位置都可以，（本例放在矩形框上方一點(diǎn)），將動(dòng)態(tài)面板命名為Clock，并設(shè)置兩個(gè)狀態(tài)，分別為狀態(tài)1、狀態(tài)2；

3、設(shè)置一個(gè)變量，等賦值之后，作為開(kāi)始倒計(jì)時(shí)作用；

4、上述三步準(zhǔn)備工作做好后，咱開(kāi)工設(shè)置吧；首先選中矩形框SendSMS，編輯用例“鼠標(biāo)單擊時(shí)”，給變量Daojishi設(shè)置一個(gè)初始值60，意為從60秒開(kāi)始倒計(jì)時(shí)；

5、緊接著設(shè)置動(dòng)態(tài)面板Clock中的狀態(tài)1、狀態(tài)2，循環(huán)著切換狀態(tài)，1000毫秒切換一次；這舉是為了觸發(fā)動(dòng)態(tài)面板的“面板狀態(tài)改變時(shí)”事件。

6、設(shè)置動(dòng)態(tài)面板Clock“狀態(tài)改變時(shí)”事件，新增條件在變量Daojishi>0的情況下，設(shè)置矩形框SendSMS里文字變更為“Daojishi秒后重新獲取”。

7、設(shè)置Daojishi變量值自減1，意為判斷在每次當(dāng)變量值Daojishi>0時(shí)，動(dòng)態(tài)面板Clock第1秒切換一次狀態(tài)時(shí)，而Daojishi值由60變成59；再1秒后循環(huán)切換到下一狀態(tài)時(shí)，Daojishi值由59變成58；以此類推...

8、最后再設(shè)置一下當(dāng)Daojishi值自減到0時(shí)的情況，設(shè)置動(dòng)態(tài)面板不再切換狀態(tài)了，即設(shè)置Clock為停止循環(huán)；

9、此時(shí)SendSMS矩形框內(nèi)的文字停止在“0秒后重新獲取”，不再倒計(jì)時(shí)了；但不符要求，需要調(diào)整為“重新獲取驗(yàn)證碼”，操作如下圖所示：

10、至此所有設(shè)置已完成，咱預(yù)覽下效果如下：

短信驗(yàn)證碼通常出現(xiàn)在登錄、注冊(cè)、忘記密碼等場(chǎng)景下需要用戶手工點(diǎn)擊“獲取短信驗(yàn)證碼”按鈕來(lái)觸發(fā)系統(tǒng)發(fā)短信，同時(shí)按鈕會(huì)改變成倒計(jì)時(shí)狀態(tài)，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

Axure怎么設(shè)計(jì)手機(jī)短信倒計(jì)時(shí)效果?

axure RP7.0怎么制作60秒倒計(jì)時(shí)效果?

Axure RP 8怎么制作驗(yàn)證碼倒計(jì)時(shí)原型?

最新評(píng)論