Axure RP9 倒计时效果

在注册时常用到发送验证码的功能,输入手机号后点击“发送验证码” 此时按钮置灰 并开始倒计时,倒计时结束后,可以再次点击“发送验证码”

我用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、添加动作  禁用当前按钮。


最后,预览看效果!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容