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

　　获取验证码性能是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~~~~~~~ 到此为止，验证码倒计时案例到此就已矣了，速即预览看下后果吧！~~~~ 倘使念会意的更明确，看的更明了少许，可认为“太过面板”的两个状况配置区别的颜色，就会瞥睹颜色每过一秒就会切换一次。 下载地点：