現(xiàn)在很多網(wǎng)站都會使用短信驗(yàn)證碼,該怎么使用axure設(shè)計(jì)一個帶有倒計(jì)時(shí)的短信驗(yàn)證碼呢?下面我們就來看看詳細(xì)的教程。
要實(shí)現(xiàn)倒計(jì)時(shí)的功能在AXURE中需要借助兩個元件配合才能完成,一個元件是“獲取短信驗(yàn)證碼”的按鈕;另一個元件是動態(tài)面板;同時(shí)還需要一個變量;變量在這里相當(dāng)于一個計(jì)時(shí)器,我們先把變量設(shè)置為60時(shí),一旦啟動了,就從60一直倒計(jì)時(shí)到0;

1、拖一個矩形,設(shè)置好長寬高,并命名為SendSMS;

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

3、設(shè)置一個變量,等賦值之后,作為開始倒計(jì)時(shí)作用;

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

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

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


7、設(shè)置Daojishi變量值自減1,意為判斷在每次當(dāng)變量值Daojishi>0時(shí),動態(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è)置動態(tài)面板不再切換狀態(tài)了,即設(shè)置Clock為停止循環(huán);

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

10、至此所有設(shè)置已完成,咱預(yù)覽下效果如下:
新聞熱點(diǎn)
疑難解答
圖片精選