快好知 kuaihz

Axure教学(中级):验证码发送倒计时

在产品注册页面,当点击发送验证码后,会进入倒计时,计时结束后才能重新点击发送,这个效果是如何做出来的呢?

生活中,我们经常看到网站、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

示例演示:

如有问题欢迎在评论区留言!

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:倒计时  倒计时词条  中级  中级词条  发送  发送词条  验证  验证词条  教学  教学词条  
原型

 AxureRP教程–生成规格说明...

AxureRP提供了自动生成需求规格说明书的功能,并提供word和chm两种输出格式,对需求设计人员来说非常实用。不过要在设计的过程当中做好注释,如网页说明和组...(展开)

原型

 Axure教程|完美的Banne...

Banner轮播是原型图中最常见的模块之一,无论是电商类的app还是小说类,视频类app都离不开它;人人都是产品经理的官网首页展示内容也是一个banner轮播。...(展开)