0°

【Axure实例教程】获取验证码倒计时效果

介绍

获取验证码功能是APP或PC端比较常见的功能,通常出现在登录、注册、忘记密码等需要手机号码验证的场景下,用户点击“获取验证码”按钮来发送短信,同时按钮变成倒计时状态,并禁用不可点击,当倒计时完毕,按钮重新变为可用状态,并可重复获取验证码。

预览效果

http://www.youzhifang.net/axure/case/prototype/daojishi/%E9%AA%8C%E8%AF%81%E5%80%92%E8%AE%A1%E6%97%B6.html

知识点拆解

• 按钮文字赋值

• 动态面板循环播放

• 动态面板状态改变事件应用

• 全局变量应用

• 条件判断

• 函数应用

步骤详解

1、在画布中拖入矩形,命名为“按钮”,再拖入一个动态面板,命名为“过度面板”,双击动态面板,点击“+”添加一个新的状态“State2”,调整矩形、动态面板的尺寸为合适的尺寸(尺寸不影响效果,只为更美观一点)。

说明:此处使用动态面板作为辅助控件,主要用于循环赋值,继续往下看哦!~

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

2、给按钮设置背景颜色#1AB394,右键按钮,选择“交互样式”,设置按钮【禁用】状态的颜色,选择【填充颜色】赋值#999999

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

3、在【项目】菜单中,点击【全局变量】,添加一个新的全局变量“num”,设置默认值为“60”

说明:此处全局变量名称可自行定义,默认值也可以调为任意的数字,测试的时候可以设置小点的数字,比如10,方便测试

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

4、鼠标单击选中矩形,为“按钮”添加【鼠标单击时】事件,添加动作【设置面板状态】,选择动态面板“过度面板”,选择状态【Nxet】,勾选【向后循环】,勾选【循环间隔】,设置循环间隔为【1000】毫秒,取消勾选【首个状态延时1000毫秒切换】(不取消的话在加载的时候就会延迟1秒,感觉像卡住了)。

说明:此处设置是利用动态面板循环的特性,让数字动起来

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

5、鼠标点击选中动态面板“过度面板”,单击添加【状态改变时】事件,单击【添加条件】设置条件选项,条件设置为【变量值】【num】【>】【1】

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

6、接上一步,添加动作【设置变量值】,选中【num】,设置全局变量值为 “[[num-1]]”

说明:此处设置每次动态面板状态变化一次,全局变量的值就减去1,依次递减,当num的值减到小于等于1时,就跳出循环,循环结束

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

7、接上一步,添加动作【设置文本】,选中【按钮】,设置文本为 “[[num]]秒后可重新获取”

说明:此处设置修改按钮的文本,开始进行倒计时显示

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

8、接上一步,添加动作【启用/禁用】,选中【当前元件】,选中【禁用】

说明:此处设置禁用让按钮不可点击,对应【步骤2】的设置效果

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

9、为动态面板“过度面板”【状态改变时】再次添加用例,当不满足num>1时,执行该条件下的动作,添加动作【设置文本】,选中【按钮】,设置文本为“重新获取验证码”

说明:此处主要用于设置,当倒计时结束的时候,需要做四个动作:1、设置按钮的文字“重新获取验证码”;2、重置全局变量的值为60(当倒计时完了的时候,全局变量的值为0 ,如果想再次获取验证码,需要重置变量值为60);3、激活按钮,将按钮启动可点击;4、停止动态面板的循环

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

10、接上一步,添加动作【设置变量值】,选择【num】,设置全局变量值为“60”

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

11、接上一步,添加动作【启用/禁用】,选择【按钮】,设置启用

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

12、接上一步,添加动作【设置面板状态】,选择【过度面板】,选择状态【停止循环】

说明:此处一定要设置停止循环,不然就会一直循环下去,60——0,60——0,60——0~~~~~~~

【Axure实例教程】获取验证码倒计时效果_动态面板、函数、变量

到此为止,验证码倒计时案例到此就结束了,赶紧预览看下效果吧!~~~~

如果想理解的更清楚,看的更明白一些,可以为“过度面板”的两个状态设置不同的颜色,就会看见颜色每过一秒就会切换一次。

下载地址:

http://www.youzhifang.net/axure/case/download/daojishi.rp


更多原创高质Axure原型可访问:https://www.axureshop.com/shop/18

非常感谢!

「点点赞赏,手留余香」

1人已赞赏

  • 黄老师

    ¥50
axure商城
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论