在产品注册页面,当点击发送验证码后,会进入倒计时,计时结束后才能重新点击发送,这个效果是如何做出来的呢?
生活中,我们经常看到网站、APP的注册页面,当点击发送验证码后,会进入倒计时,计时结束后才能重新点击发送。
一、页面布局
从左侧元件库拉入一个【矩形】作为验证码按钮,两个【文本框】作为手机输入框和短信验证码输入框,如下:
首先双击【验证码矩形】,将文本设置为:发送验证码;
其次,点击【顶部菜单栏】-》【项目】-》【全局变量】,点击弹窗中的“+”号,添加验证码的【全局变量】,这里命名为:captcha;想从哪个数字开始倒计时,即将此变量的默认值设置为哪个数字(此案例设为10);
二、添加交互
实际效果为:当点击验证码按钮时,验证码文案会变为“10秒后重新获取”,接下来变为9、8、7……秒后重新获取。
实现流程为:选中验证码矩形,双击右侧【属性】栏中的【鼠标点击时】;
选择左侧导航中【设置文本】-》勾选【当前元件】-》设置文本的值为“[[captcha]]秒后重新获取”;
因为之前已经将全局变量captcha的默认值设为10,所以预览时文本为 “10秒后重新获取”;
接下来需要设置等待事件,让文案每隔一秒,进行变化一次;
即选择左侧导航中【其他】-》【等待】-》等待时间设为“1000”毫秒;
然后让全部变量 “captcha” 减1,变为9、8、7……..,即再次选择左侧导航中【全局变量】-》【设置变量值】-》勾选【captcha】,值设置为:[[captcha-1]]。此时,“captcha” 的值已经变为“9”;
最后,需要重新触发最先的点击按钮交互事件,让验证码的文本发生变化,即变为:“9秒后重新获取”;并且重复执行该交互。
因此,再次选择左侧导航中【其他】-》【触发事件】-》勾选【当前元件】-》勾选【鼠标单击时】。
三、交互细节调整
正常情况下,应该是倒计时为0秒时停止计时,按钮文本变为“重新获取”。点击重新获取,则重新执行倒计时效果。
因此,需要对全局变量进行判断,当全局变量大于等于0时,执行上面的交互。否则(小于0),直接让文本变为 “重新获取”;
并且让全局变量【captcha】重新设置10,这样,重新点击【验证码】按钮时,由于全局变量【captcha】大于0,才能够重新执行鼠标点击的交互事件。
给case1添加条件,当变量值【captcha】>=0时,执行事件;
再次选中验证码矩形,双击右侧【属性】栏中的【鼠标点击时】,添加case2;选择左侧导航中【设置文本】-》勾选【当前元件】-》设置文本的值为“重新获取”;
选择左侧导航中【全局变量】-》【设置变量值】-》勾选【captcha】,值设置为:10。
四、预览效果
示例下载:
https://pan.baidu.com/s/1uN7AiwbB604wdSqpA6pNZA
示例演示:
如有问题欢迎在评论区留言!