MAC AxureRP9登录获取验证码倒计时

1 效果要求

在很多系统中需要获取短信验证码，当点击“获取验证码”按钮时，该按钮所显示的文本就在以倒计时的方式进行显示，在倒计时期间，按钮颜色变灰，倒计时结束后按钮文本变成“重新获取验证码”。各种操作时的效果截图如下：

2 AxureRP版本

MAC AxureRP 9.0.0.3677

3 操作步骤

3.1 第1步

新建一个页面（页面名称为短信验证码倒计时），从元件中拖一个button和一个动态面板，button命名为GetButton，动态面板命名为LoopPanel，且对对动态面板增加一个状态：State2。设计好后在“概要”中的效果如下图：

3.2 第2步

创建一个全局变量，变量名为TimeValue，菜单栏-->项目(P)-->全局变量：

第1步与第2步不分先后，可以互换。

3.3 第3步

为按钮“GetButton”设置【禁用】状态的交互样式，【填充颜色】为灰色，设计好的效果如图红框所示：

这一步的设置步骤如下：选择“新建交互”，找到“：禁用”，在弹出的对话框中设置“填充颜色”：

3.4 第4步

设置按钮GetButton，设置好的效果如图所示：

实现上述效果的设置操作如下：

在“新建交互”-->“单击时”-->“设置面板状态”-->选择“LoopPanel“，设置如下图，点击确认。

继续，在图中选择“+”，在弹出的“添加动作”-->“启用/禁用”-->“GetButton”-->“禁用”：

3.5 第5步

设置动态面板，设置好的效果如图所示：

这一步操作时要比较注意，RP9与RP8差别很大。

“新建交互”-->“状态改变时”-->”添加动作”，这里不要添加任何动作，因为我们是要添加条件(英文版为case)，而“添加动作”中没有。此时的效果如下图所示，在下图中点击“启用情形”才可以添加条件。

3.5.1 条件1

点击“添加条件”：

3.5.1.1 动作1-设置变量值-1

在此条件下设置值的变化，点击图中+号“添加动作”-->“设置变量值”：

3.5.1.2 动作2-重设按钮显示文字

设置倒计时时按钮GetButton上显示的内容，点击图中+号 添加动作-->”设置文本”:

3.5.2 条件2

参照条件1，点击“启用情形”，创建“情形2”，此时不“添加条件”。

点击“确定”后效果如图，在情形2种点击+号添加动作。

3.5.2.1 动作1-按钮文本变为重新获取验证码

设置倒计时结束后GetButton按钮上显示的文字变为“重新获取验证码”： 添加动作-->”设置文本”：

3.5.2.2 动作2-重置变量值

重置变量的值：添加动作-->设置变量值：

3.5.2.3 动作3-置按钮为启用

设置GetButton按钮为启用：添加动作-->设启用/禁用启用：

3.5.2.4 动作4-停止循环

添加动作-->设置面板状态-->LoopPanel，STATE选择：停止循环