Axure制作获取验证码倒计时效果操作实例

今天教大家如何用Axure制作获取验证码倒计时效果，验证码并不会马上发给用户，所以做倒计时提醒用户需要一点时间才能收到验证码。axure短信验证码倒计时具体操作步骤如下：

• 软件：Axure 9.0
• 硬件：Windows/Mac电脑
• 逻辑梳理

教程 1. 绘制手机号账户登录页面，如下图

• 找一个手机壳的元件库，或用矩形设置成标准手机尺寸。
• 制作内容页面，如左侧图所示。
• 在手机号输入框中设置提示文字“请输入手机号”。
• 在验证码输入框中设置提示文字“请输入验证码”。

2. 创建动态面板，建立至少2个以上的状态

动态面板的作用主要用于切换状态时的倒计时效果，简单的说，点击获取后60秒到0秒的文案展示都是靠动态面板实现的。这里留一个小思考，为什么要建立至少2个状态呢？

3. 添加获取验证码按钮交互效果

给获取验证码按钮起一个名字，并设置禁用时样式。

设置单击时交互。首先，设置之前建好的动态面板状态，设置切换状态下一项时能够间隔向后循环。保证获取验证后的等待时间变化。（动态面板之前已起好名字为“切换状态”）

在单击时交互效果中添加动作，设置一个全局变量x。并设置x的值为60。

4. 设置动态面板状态改变时交互动作

情形1 ：全局变量x的值不等于0时，即大于0时设置让x的值每次减一。实现点击后变为60秒倒计时，变为0之前禁止重复点击获取验证的效果。

情形2：全局变量x的值等于0时，实现可重新点击获取验证码效果。

验证效果

OK，最终达到我们想要的效果，当我们输入手机号以后点击获取验证码后，按钮变为禁用状态，同时文案进行倒计时展示，当倒计时为0时，按钮变为启用状态。

以上就是axure短信验证码倒计时全部内容介绍了，关于更多axure9教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。