Axure如何制作短信验证倒计时效果

我们在使用手机获取短信验证码的时候，为避免用户不断的点击造成重复，常常会将发送验证码做一个倒计时处理。在Axure中也能简单的实现这个效果，那么，Axure如何制作短信验证倒计时效果呢？本文就由小编带大家了解一下，一起来看看吧~

工具/原料

Axure版本:企业版8.0.0.3338

PC电脑：Windows 7

方法/步骤

1.打开Axure，准备一个【短信验证码功能页面】，如图

2.从左侧元件库拖取一个【动态面板】到页面，然后添加一个动态面板状态。（注意，添加动态面板动态是为了后面设计倒计时的数据变换，空状态即可）,如图

3.从左侧元件库拖取一个【矩形2】元件到页面，命名【倒计时】，文本颜色为灰色。调整大小位置同【点击发送验证码】一样，然后设为隐藏。如图

4.设置【点击发送验证码】的【鼠标点击时】事件为：设置动态面板循环Next切换，间隔1000毫秒，如图

5.找到菜单【项目>>全局变量】，添加一个变量【time】，值等于60，如图

6.设置【动态面板】的【状态改变时】事件1为：添加条件如果time>=0，则显示【倒计时】，设置【倒计时】的文字为【再发一次，倒计时[[time]]S】,然后设置等待1000毫秒，再将变量time设置等于time-1。如图

7.设置【动态面板】的【状态改变时】事件2为：隐藏倒计时，将变量值设置time=60，设置动态面板为停止循环。如图

8.预览结果，短信验证倒计时效果完成。如图

总结：

1.打开Axure，准备一个【短信验证码功能页面】;

2.从左侧元件库拖取一个【动态面板】到页面，然后添加一个动态面板状态;

3.从左侧元件库拖取一个【矩形2】元件到页面，命名【倒计时】，文本颜色为灰色。调整大小位置同【点击发送验证码】一样，然后设为隐藏;

4.设置【点击发送验证码】的【鼠标点击时】事件;

5.找到菜单【项目>>全局变量】，添加一个变量【time】，值等于60;

6.设置【动态面板】的【状态改变时】事件1;

7.设置【动态面板】的【状态改变时】事件2;

8.预览结果，短信验证倒计时效果完成。

注意事项

Tips:添加动态面板是为了设计动态改变倒计时的文字。