Axure RP9——【发送验证码】实现

发送验证码效果的实现

Send the verification code

 

目录

Send the verification code

效果展示:

操作:


效果展示:

Axure RP9 ——发送验证码效果

 

操作:

1.放置元件:文本标题,文本框(并输入相应的提示文字),动态面板(需要加2个状态,因为要实现动态效果)

2.设置交互:

需求:点击“发送验证码”后进入自动倒计时,从60秒为开始,到0s后,重新变为“发送验证码”

实现方法:全局变量+矩形按钮+动态面板两种状态的切换

(1)“发送验证码”交互

需要用到动态面板动起来;并且设置变量值x,设定一个起始值,60;(即从60秒开始计时)

      

(2)动态面板“循环面板”交互

需要用到全局变量x;并增加情形,设置条件;因为是属于倒计时,当倒计时为0 的时候,需重新回到发送验证码文本

①情形一:当x>0时;变量值为(x-1)

从60秒起始,倒计时60s,59s,...,0;

②情形二:当x=0时;设置文本——发送验证码为发送验证码

到0后,直接变为文本发送验证码

(3)设置成功后,实现了倒计时的功能。但是,当在它进行倒计时的时候,重新点击会返回到60s的那个起始。

所以,需要进行一个条件限制。

对“发送验证码”的条件设置:添加情形;对元件文字——当前——==发送验证码的时候,进行之后的动作交互。

设置完成后,当它倒计时状态,多次点击也不会影响重新计时。

预览即可。

 

 

 

 


版权声明:本文为WY_star1原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。