Axure RP9 倒计时效果

在注册时常用到发送验证码的功能，输入手机号后点击“发送验证码” 此时按钮置灰 并开始倒计时，倒计时结束后，可以再次点击“发送验证码”

我用Axure也做了一个这样的效果，不足之处请指出。

下面先看一下效果：

下面详细介绍一下制作过程：

步骤一：在页面中添加元件，其他元件根据需要添加，这里最重要的是添加一个按钮并命名为“发送验证码”  和  添加 动态面板。

按钮用来触发事件并展示效果，动态面板主要是为了做循环递减效果并设置文本

步骤二：在【项目】菜单中，点击【全局变量】，添加一个新的全局变量“Num”。

步骤三：双击动态面板，为其添加一个新的状态“State2”。（这一步是为了保证动态面板能够切换状态）。

步骤四：为动态面板增加【状态改变时】事件并添加第一个情形，条件设置为【变量值】【Num】【>】【值】“0”。 如下图

步骤五：添加满足条件的动作为【设置变量值】【Num】为【值】“[[Num-1]]”。

步骤六：继续添加动作，【设置文本】于“发送验证码”为【设置文本】“[[Num]]秒后可重新发送”。

步骤七：为【状态改变时】再次添加情形（当变量Num等于0时）

步骤八：为此种情形下添加动作

1、将按钮“发送验证码” 的文本设置成“发送验证码”  （因为在Num>0的情形中将文本改成了“[[Num]]秒后可重新发送”所以处需重置一下文本）

2、将变量Num 的值重置为 60，以便下次倒计时使用。

3、更改按钮“发送验证码”的状态为启用。

4、设置该动态面板状态为停止循环。（在按钮的点击事件中将会设置动态面板循环）

步骤九：为按钮“发送验证码”设置【禁用】状态的交互样式，【填充颜色】为灰色。

步骤十：为按钮“发送验证码”添加【鼠标单击时】的事件，并设置如下动作：

1、添加动作，设置变量Num值为60（首次倒计时需要有初始值，如果设置变量的时候已经设置了默认值此处可忽略）

2、添加动作【设置面板状态】于动态面板，选择状态【下一项】，勾选【向后循环】，设置自动循环间隔为【1000】毫秒，取消【首个状态延时1000毫秒切换】的选项。

3、添加动作  禁用当前按钮。

最后，预览看效果！