发送验证码效果的实现
目录
效果展示
操作
效果展示:
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的那个起始。
所以,需要进行一个条件限制。
对“发送验证码”的条件设置:添加情形;对元件文字——当前——==发送验证码的时候,进行之后的动作交互。
设置完成后,当它倒计时状态,多次点击也不会影响重新计时。
预览即可。