生活中,我们经常看到网站、APP的注册页面,当点击发送验证码后,会进入倒计时,计时结束后才能重新点击发送。
一、页面布局
从左侧元件库拉入一个【矩形】作为验证码按钮,两个【文本框】作为手机输入框和短信验证码输入框,如下:
首先双击【验证码矩形】,将文本设置为:发送验证码;
其次,点击【顶部菜单栏】-》【项目】-》【全局变量】,点击弹窗中的“+”号,添加验证码的【全局变量】,这里命名为:captcha;想从哪个数字开始倒计时,即将此变量的默认值设置为哪个数字(此案例设为10);
二、添加交互
实际效果为:当点击验证码按钮时,验证码文案会变为“10秒后重新获取”,接下来变为9、8、7……秒后重新获取。
实现流程为:选中验证码矩形,双击右侧【属性】栏中的【鼠标点击时】;