Axure教程:實現倒計時獲取驗證碼效果

38 評論 41755 瀏覽 125 收藏 4 分鐘

在app注冊或者登錄時,一般需要驗證手機號碼,常用的方式就是向手機發(fā)送驗證碼。下面介紹在Axure中,通過動態(tài)面板切換、文本框文字改變兩種方法實現這種效果。文章部分來源于其它網友,感謝分享。

一、效果圖

首先我們看一下效果圖,如下:

11.gif

二、具體實現:

第一種方法:全局變量+矩形按鈕+動態(tài)面板兩種狀態(tài)的切換

1、創(chuàng)建一個矩形(命名為button)、一個動態(tài)面板(命名為:option)、一個全局變量(命名為:timer),動態(tài)面板創(chuàng)建兩個state。如下圖:

1

2、為按鈕創(chuàng)建“鼠標單擊時”事件,為動態(tài)面板創(chuàng)建“狀態(tài)改變時”事件

2

3、運行即可查看相關效果(底部查看效果)

第二種方法:動態(tài)面板+文本改變

1、創(chuàng)建一個動態(tài)面板(命名為:option),添加三個狀態(tài),分別為獲取、數字、再次獲取。三種狀態(tài)下分別制作對應的原件顯示,如下圖:

3

45

6

2、為三個狀態(tài)內原件,分別創(chuàng)建事件:

a、獲取狀態(tài):“鼠標單擊時”事件;數字狀態(tài):“文本改變時”事件;再次獲取狀態(tài):“鼠標單擊時”事件。如下:

73、運行效果如下:

1.gif

以上就是實現簡單驗證碼倒計時效果。

 

本文由 @走錯路了 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 怎么刪評論

    來自廣東 回復
  2. ??
    實現“動態(tài)內容”效果:
    1、文本框,文本改變時事件
    2、動態(tài)面板切換

    來自廣東 回復
  3. 求源文件,396320632@qq.com

    來自上海 回復
  4. 感謝分享~ ??

    來自廣東 回復
  5. 數字按鈕是文本框嗎?如果是文本框怎么顯示滾動條而且數字不顯示,還是按鈕是矩形上面覆蓋一個文本框

    來自北京 回復
  6. 照著學會了,但是小白一臉蒙蔽,成稿來得太突然 ?

    來自廣東 回復
  7. 謝謝大神!技能點Get ??

    來自湖北 回復
  8. 樓主大神,為什么動態(tài)面板需要設置成兩個state1和state2,并且這兩個面板沒有任何內容,只是設置面板的條件就可以完成這個倒計時。請問是什么原理思路,求解答,謝謝!

    來自江西 回復
    1. 兩個狀態(tài)1s切換一次,沒切換一次就去改倒計時的數字,從而實現倒計時。

      來自上海 回復
  9. 求源文件,謝謝!郵箱:1248318757@qq.com

    來自四川 回復
  10. 你好,我用了第一種方法做的,但是點擊按鈕后,15s就不會變了,沒有任何效果,也不知道什么情況,請教,謝謝!

    來自四川 回復
    1. button 沒有設置往后循環(huán)

      來自江西 回復
  11. 求源文件,謝謝!郵箱:381491355@qq.com ??

    來自浙江 回復
  12. 求源文件,謝謝!郵箱:1171958713@qq.com ??

    來自浙江 回復
  13. 設置文字于txt=”[[a-1]]”這個是怎么設置的,不會;可以分享一下源文件嗎,可以的話發(fā)我郵箱342328980@qq.com
    謝謝! ??

    來自四川 回復
    1. 應該是局部變量吧

      來自上海 回復
  14. option向后循環(huán),目的是啥呢 ??

    來自上海 回復
  15. axure7.0對于文本控件好像就沒有文本改變這一事件 ??

    來自四川 回復
  16. 設置文字于txt=”[[a-1]]” 這個是什么函數?謝謝

    來自廣東 回復
    1. 當前元件txt的值。留下郵箱,可以發(fā)你

      來自北京 回復
    2. 求源文件 ?? ,516511346@qq.com

      來自重慶 回復
    3. 小二也在看這個

      回復
    4. laizonghai@163.com 謝謝 ??

      來自廣東 回復
  17. 您好,能給個原文件么?554790406@qq.com 謝謝

    來自北京 回復
  18. 求一個 10485716@qq.com

    來自上海 回復
  19. 教程挺簡單的,不過在實際操作中大家要記得:針對方法1
    1.button是分別放在狀態(tài)面板state1、state2中,不是在面板外;
    2.且state中不需要修改文字為獲取驗證碼,否則會出現隔秒顯示而非圖例中的樣子;
    3.最后的else if ture 條件中加上option為停止循環(huán),否則會一直閃;

    來自江蘇 回復
    1. 你好,如何放在兩個狀態(tài)里,那樣怎么帶不出button了,我白丁一個,抱歉問這么弱的問題

      回復
    2. 我按照方法1做的,沒有你說的那3點,我也實現了文章中的效果。

      來自上海 回復
    3. 搞了半天,不會設置TXT的變量,請問你會嗎?或者貼主教一下具體怎么設置的,我看到里面寫了個if判斷

      回復
    4. 文檔不完整,一個都沒說清楚,low

      回復
  20. 雖然以前做這個效果時,在網上查過 但是這文章還是收藏了

    來自廣東 回復
  21. 請問發(fā)布文章時是怎么插入動態(tài)效果圖的?=w=

    來自北京 回復
    1. 用GifCam制作gif圖片,上傳就可以了

      來自北京 回復
    2. 感謝

      來自北京 回復
  22. 喜歡第一種=。=

    來自浙江 回復
  23. 很實用。

    來自山西 回復
  24. 簡單實用小教程

    來自廣東 回復