Axure 9 ：实现倒计时获取验证码效果（无需动态面板）

这次想给大家分享一个使用Axure9实现获取验证码倒计时的简单方法

一、效果图

倒计时效果图

二、具体实现方法

1、创建一个button按钮，更改button文案为“点击获取验证码”，更改button名称为“获取验证码”

步骤一

2、设置一个全局变量 “x” 变量值为 6秒（变量值可根据自己的实际业务设置），这里设置6秒是为了方便验证功能。

步骤二

3、添加单击时的第一种情况

1）单击时，文案由原来的“点击获取验证码”变为 “x秒后重新获取”

首先我们要设置case1，如下图

添加单击情况

接着我们要设置加入的动作1，动作选择“设置文本”。选择目标为“获取验证码”，设置值为“[[x]]秒后重新获取”。

动作1

加入动作2，等待 1000ms

动作2

加入动作3，设置点击按钮后的文案，要更改为“[[x-1]]秒后重新获取”

实现动作3：添加一个“设置变量值”的动作，选择变量为“x”，值为“[[x-1]]” 这样可以完成倒计时

动作3

动作4：添加触发条件，选择目标为“获取验证码”，点击添加事件为“单击”

动作4

2、单击的第二种情况

添加完动作4后，我们的功能已经完成一半了，接下来我们要做的是倒计时结束后文案变为“重新获取”

首先我们要设置case2（点击“单击时”隔壁的添加情形）

在case2下面添加动作，设置文本，目标为“获取验证码”，值为“重新获取”。

倒计时结束后显示重新获取

最后我们还要把变量值变回原来的值，这样点击重新获取后就能继续倒计时了

添加一个设置变量值的动作，变量值选 “x”，值为6。

重新设置变量值

到这来就把倒计时获取验证码的原型做好了，最后一步发布预览就可以啦。如果有什么问题可以在下方留言哦。

以上就是主要内容，如有不足的地方请多多指教，也欢迎大家一起来讨论。未经同意，禁止转载！