快生活 - 生活常识大全

教学中级验证码发送倒计时


  在产品注册页面,当点击发送验证码后,会进入倒计时,计时结束后才能重新点击发送,这个效果是如何做出来的呢?
  生活中,我们经常看到网站、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
  示例演示:
  如有问题欢迎在评论区留言!
网站目录投稿:静筠