Axure教程:實現倒計時獲取驗證碼效果
在app注冊或者登錄時,一般需要驗證手機號碼,常用的方式就是向手機發(fā)送驗證碼。下面介紹在Axure中,通過動態(tài)面板切換、文本框文字改變兩種方法實現這種效果。文章部分來源于其它網友,感謝分享。
一、效果圖
首先我們看一下效果圖,如下:
二、具體實現:
第一種方法:全局變量+矩形按鈕+動態(tài)面板兩種狀態(tài)的切換
1、創(chuàng)建一個矩形(命名為button)、一個動態(tài)面板(命名為:option)、一個全局變量(命名為:timer),動態(tài)面板創(chuàng)建兩個state。如下圖:
2、為按鈕創(chuàng)建“鼠標單擊時”事件,為動態(tài)面板創(chuàng)建“狀態(tài)改變時”事件
3、運行即可查看相關效果(底部查看效果)
第二種方法:動態(tài)面板+文本改變
1、創(chuàng)建一個動態(tài)面板(命名為:option),添加三個狀態(tài),分別為獲取、數字、再次獲取。三種狀態(tài)下分別制作對應的原件顯示,如下圖:
2、為三個狀態(tài)內原件,分別創(chuàng)建事件:
a、獲取狀態(tài):“鼠標單擊時”事件;數字狀態(tài):“文本改變時”事件;再次獲取狀態(tài):“鼠標單擊時”事件。如下:
3、運行效果如下:
以上就是實現簡單驗證碼倒計時效果。
本文由 @走錯路了 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載。
評論
評論請登錄
怎么刪評論
??
實現“動態(tài)內容”效果:
1、文本框,文本改變時事件
2、動態(tài)面板切換
求源文件,396320632@qq.com
感謝分享~ ??
數字按鈕是文本框嗎?如果是文本框怎么顯示滾動條而且數字不顯示,還是按鈕是矩形上面覆蓋一個文本框
照著學會了,但是小白一臉蒙蔽,成稿來得太突然 ?
謝謝大神!技能點Get ??
樓主大神,為什么動態(tài)面板需要設置成兩個state1和state2,并且這兩個面板沒有任何內容,只是設置面板的條件就可以完成這個倒計時。請問是什么原理思路,求解答,謝謝!
兩個狀態(tài)1s切換一次,沒切換一次就去改倒計時的數字,從而實現倒計時。
求源文件,謝謝!郵箱:1248318757@qq.com
你好,我用了第一種方法做的,但是點擊按鈕后,15s就不會變了,沒有任何效果,也不知道什么情況,請教,謝謝!
button 沒有設置往后循環(huán)
求源文件,謝謝!郵箱:381491355@qq.com ??
求源文件,謝謝!郵箱:1171958713@qq.com ??
設置文字于txt=”[[a-1]]”這個是怎么設置的,不會;可以分享一下源文件嗎,可以的話發(fā)我郵箱342328980@qq.com
謝謝! ??
應該是局部變量吧
option向后循環(huán),目的是啥呢 ??
axure7.0對于文本控件好像就沒有文本改變這一事件 ??
設置文字于txt=”[[a-1]]” 這個是什么函數?謝謝
當前元件txt的值。留下郵箱,可以發(fā)你
求源文件 ?? ,516511346@qq.com
小二也在看這個
laizonghai@163.com 謝謝 ??
您好,能給個原文件么?554790406@qq.com 謝謝
求一個 10485716@qq.com
教程挺簡單的,不過在實際操作中大家要記得:針對方法1
1.button是分別放在狀態(tài)面板state1、state2中,不是在面板外;
2.且state中不需要修改文字為獲取驗證碼,否則會出現隔秒顯示而非圖例中的樣子;
3.最后的else if ture 條件中加上option為停止循環(huán),否則會一直閃;
你好,如何放在兩個狀態(tài)里,那樣怎么帶不出button了,我白丁一個,抱歉問這么弱的問題
我按照方法1做的,沒有你說的那3點,我也實現了文章中的效果。
搞了半天,不會設置TXT的變量,請問你會嗎?或者貼主教一下具體怎么設置的,我看到里面寫了個if判斷
文檔不完整,一個都沒說清楚,low
雖然以前做這個效果時,在網上查過 但是這文章還是收藏了
請問發(fā)布文章時是怎么插入動態(tài)效果圖的?=w=
用GifCam制作gif圖片,上傳就可以了
感謝
喜歡第一種=。=
很實用。
簡單實用小教程