欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Axure RP8怎么設(shè)計(jì)倒計(jì)時(shí)獲取短信驗(yàn)證碼效果?

  發(fā)布時(shí)間:2017-08-25 15:00:24   作者:佚名   我要評(píng)論
Axure RP8怎么設(shè)計(jì)倒計(jì)時(shí)獲取短信驗(yàn)證碼效果?經(jīng)常能見(jiàn)到帶有短信驗(yàn)證的網(wǎng)頁(yè),該怎么設(shè)計(jì)出這個(gè)交互效果呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下

現(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í)原型?

相關(guān)文章

  • Axure RP怎么給網(wǎng)頁(yè)添加滾動(dòng)字幕?

    Axure RP怎么給網(wǎng)頁(yè)添加滾動(dòng)字幕?看到很多網(wǎng)頁(yè)有滾動(dòng)字幕,想要在Axure RP中制作滾動(dòng)字幕效果,該怎么制作呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-08-15
  • Axure RP怎么設(shè)計(jì)一款導(dǎo)航菜單?

    Axure RP怎么設(shè)計(jì)一款導(dǎo)航菜單?Axure RP中設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候需要設(shè)計(jì)一款導(dǎo)航菜單,該怎么設(shè)計(jì)恩?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-08-11
  • axure怎么給下拉框/列表框和元件文本添加內(nèi)容?

    axure怎么給下拉框/列表框和元件文本添加內(nèi)容?axure中有很多元件,今天我們就來(lái)看看給下拉框/列表框和元件文本添加內(nèi)容的方法,需要的朋友可以參考下
    2017-07-25
  • Axure怎么繪制一幅生產(chǎn)產(chǎn)品圖?

    Axure怎么繪制一幅生產(chǎn)產(chǎn)品圖?Axure中想要設(shè)計(jì)一個(gè)生產(chǎn)產(chǎn)品圖,該怎么設(shè)置呢?下面我們就來(lái)看看詳細(xì)的教程,很簡(jiǎn)單,需要的朋友可以參考下
    2017-07-25
  • Axure有哪些元件? Axure元件介紹以及使用

    Axure有哪些元件?Axure中有很多元件在制作網(wǎng)頁(yè)原型的時(shí)候需要使用,今天我們就來(lái)簡(jiǎn)單的介紹Axure元件的使用方法,需要的朋友可以參考下
    2017-07-21
  • Axure RP 8怎么給網(wǎng)頁(yè)添加多選列表框?

    Axure RP 8怎么給網(wǎng)頁(yè)添加多選列表框?Axure RP 8設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候需要添加多選列表框,該怎么添加呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-07-19
  • Axure RP 8怎么設(shè)置頁(yè)面彈出框居中顯示?

    Axure RP 8怎么設(shè)置頁(yè)面彈出框居中顯示?Axure RP 8設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候,想要合設(shè)計(jì)一個(gè)居中顯示的彈框,該怎么設(shè)計(jì)呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-07-13
  • Axure RP復(fù)選框怎么實(shí)現(xiàn)單選效果?

    Axure RP復(fù)選框怎么實(shí)現(xiàn)單選效果?Axure使用復(fù)選框的時(shí)候,但是卻只想實(shí)現(xiàn)單選效果,該怎么實(shí)現(xiàn)呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下
    2017-07-06
  • Axure RP打開(kāi)后鼠標(biāo)不能使用該怎么辦?

    Axure RP打開(kāi)后鼠標(biāo)不能使用該怎么辦?在使用Axure RP的時(shí)候,發(fā)現(xiàn)打開(kāi)以后鼠標(biāo)無(wú)法使用,不能動(dòng)了,該怎么辦呢?下面我們就來(lái)看看這個(gè)問(wèn)題的解決辦法,需要的朋友可以參考
    2017-07-05
  • Axure8怎么刪除中繼器? Axure8中繼器的山中刪除方法

    Axure8怎么刪除中繼器?Axure8中想要是哪出中繼器,該怎么刪除呢?下面我們就來(lái)看看Axure8中繼器的山中刪除方法,需要的朋友可以參考下
    2017-07-03

最新評(píng)論