在注册时常用到发送验证码的功能,输入手机号后点击“发送验证码” 此时按钮置灰 并开始倒计时,倒计时结束后,可以再次点击“发送验证码”
我用Axure也做了一个这样的效果,不足之处请指出。
下面先看一下效果:
下面详细介绍一下制作过程:
步骤一:在页面中添加元件,其他元件根据需要添加,这里最重要的是添加一个按钮并命名为“发送验证码” 和 添加 动态面板。
按钮用来触发事件并展示效果,动态面板主要是为了做循环递减效果并设置文本
步骤二:在【项目】菜单中,点击【全局变量】,添加一个新的全局变量“Num”。
步骤三:双击动态面板,为其添加一个新的状态“State2”。(这一步是为了保证动态面板能够切换状态)。
步骤四:为动态面板增加【状态改变时】事件并添加第一个情形,条件设置为【变量值】【Num】【>】【值】“0”。 如下图
步骤五:添加满足条件的动作为【设置变量值】【Num】为【值】“[[Num-1]]”。
步骤六:继续添加动作,【设置文本】于“发送验证码”为【设置文本】“[[Num]]秒后可重新发送”。
步骤七:为【状态改变时】再次添加情形(当变量Num等于0时)
步骤八:为此种情形下添加动作
1、将按钮“发送验证码” 的文本设置成“发送验证码” (因为在Num>0的情形中将文本改成了“[[Num]]秒后可重新发送”所以处需重置一下文本)
2、将变量Num 的值重置为 60,以便下次倒计时使用。
3、更改按钮“发送验证码”的状态为启用。
4、设置该动态面板状态为停止循环。(在按钮的点击事件中将会设置动态面板循环)
步骤九:为按钮“发送验证码”设置【禁用】状态的交互样式,【填充颜色】为灰色。
步骤十:为按钮“发送验证码”添加【鼠标单击时】的事件,并设置如下动作:
1、添加动作,设置变量Num值为60(首次倒计时需要有初始值,如果设置变量的时候已经设置了默认值此处可忽略)
2、添加动作【设置面板状态】于动态面板,选择状态【下一项】,勾选【向后循环】,设置自动循环间隔为【1000】毫秒,取消【首个状态延时1000毫秒切换】的选项。
3、添加动作 禁用当前按钮。
最后,预览看效果!