这次想给大家分享一个使用Axure9实现获取验证码倒计时的简单方法
一、效果图
二、具体实现方法
1、创建一个button按钮,更改button文案为“点击获取验证码”,更改button名称为“获取验证码”
2、设置一个全局变量 “x” 变量值为 6秒(变量值可根据自己的实际业务设置),这里设置6秒是为了方便验证功能。
3、添加单击时的第一种情况
1)单击时,文案由原来的“点击获取验证码”变为 “x秒后重新获取”
首先我们要设置case1,如下图
接着我们要设置加入的动作1,动作选择“设置文本”。选择目标为“获取验证码”,设置值为“[[x]]秒后重新获取”。
加入动作2,等待 1000ms
加入动作3,设置点击按钮后的文案,要更改为“[[x-1]]秒后重新获取”
实现动作3:添加一个“设置变量值”的动作,选择变量为“x”,值为“[[x-1]]” 这样可以完成倒计时
动作4:添加触发条件,选择目标为“获取验证码”,点击添加事件为“单击”
2、单击的第二种情况
添加完动作4后,我们的功能已经完成一半了,接下来我们要做的是倒计时结束后文案变为“重新获取”
首先我们要设置case2(点击“单击时”隔壁的添加情形)
在case2下面添加动作,设置文本,目标为“获取验证码”,值为“重新获取”。
最后我们还要把变量值变回原来的值,这样点击重新获取后就能继续倒计时了
添加一个设置变量值的动作,变量值选 “x”,值为6。
到这来就把倒计时获取验证码的原型做好了,最后一步发布预览就可以啦。如果有什么问题可以在下方留言哦。
以上就是主要内容,如有不足的地方请多多指教,也欢迎大家一起来讨论。未经同意,禁止转载!