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的那个起始。

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

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

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

预览即可。