获取验证码功能是APP或PC端比较常见的功能,通常出现在登录、注册、忘记密码等需要手机号码验证的场景下,用户点击“获取验证码”按钮来发送短信,同时按钮变成倒计时状态,并禁用不可点击,当倒计时完毕,按钮重新变为可用状态,并可重复获取验证码。
预览效果
知识点拆解
• 按钮文字赋值
• 动态面板循环播放
• 动态面板状态改变事件应用
• 全局变量应用
• 条件判断
• 函数应用
步骤详解
1、在画布中拖入矩形,命名为“按钮”,再拖入一个动态面板,命名为“过度面板”,双击动态面板,点击“+”添加一个新的状态“State2”,调整矩形、动态面板的尺寸为合适的尺寸(尺寸不影响效果,只为更美观一点)。
说明:此处使用动态面板作为辅助控件,主要用于循环赋值,继续往下看哦!~
2、给按钮设置背景颜色#1AB394,右键按钮,选择“交互样式”,设置按钮【禁用】状态的颜色,选择【填充颜色】赋值#999999
3、在【项目】菜单中,点击【全局变量】,添加一个新的全局变量“num”,设置默认值为“60”
说明:此处全局变量名称可自行定义,默认值也可以调为任意的数字,测试的时候可以设置小点的数字,比如10,方便测试
4、鼠标单击选中矩形,为“按钮”添加【鼠标单击时】事件,添加动作【设置面板状态】,选择动态面板“过度面板”,选择状态【Nxet】,勾选【向后循环】,勾选【循环间隔】,设置循环间隔为【1000】毫秒,取消勾选【首个状态延时1000毫秒切换】(不取消的话在加载的时候就会延迟1秒,感觉像卡住了)。
说明:此处设置是利用动态面板循环的特性,让数字动起来
5、鼠标点击选中动态面板“过度面板”,单击添加【状态改变时】事件,单击【添加条件】设置条件选项,条件设置为【变量值】【num】【>】【1】
6、接上一步,添加动作【设置变量值】,选中【num】,设置全局变量值为 “[[num-1]]”
说明:此处设置每次动态面板状态变化一次,全局变量的值就减去1,依次递减,当num的值减到小于等于1时,就跳出循环,循环结束
7、接上一步,添加动作【设置文本】,选中【按钮】,设置文本为 “[[num]]秒后可重新获取”
说明:此处设置修改按钮的文本,开始进行倒计时显示
8、接上一步,添加动作【启用/禁用】,选中【当前元件】,选中【禁用】
说明:此处设置禁用让按钮不可点击,对应【步骤2】的设置效果
9、为动态面板“过度面板”【状态改变时】再次添加用例,当不满足num>1时,执行该条件下的动作,添加动作【设置文本】,选中【按钮】,设置文本为“重新获取验证码”
说明:此处主要用于设置,当倒计时结束的时候,需要做四个动作:1、设置按钮的文字“重新获取验证码”;2、重置全局变量的值为60(当倒计时完了的时候,全局变量的值为0 ,如果想再次获取验证码,需要重置变量值为60);3、激活按钮,将按钮启动可点击;4、停止动态面板的循环
10、接上一步,添加动作【设置变量值】,选择【num】,设置全局变量值为“60”
11、接上一步,添加动作【启用/禁用】,选择【按钮】,设置启用
12、接上一步,添加动作【设置面板状态】,选择【过度面板】,选择状态【停止循环】
说明:此处一定要设置停止循环,不然就会一直循环下去,60——0,60——0,60——0~~~~~~~
到此为止,验证码倒计时案例到此就结束了,赶紧预览看下效果吧!~~~~
如果想理解的更清楚,看的更明白一些,可以为“过度面板”的两个状态设置不同的颜色,就会看见颜色每过一秒就会切换一次。
下载地址:
原创文章,作者:院长大大,如若转载,请注明出处:https://www.axureschool.cn/265.html