首页 >  淘宝优化

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

作者:

来源:

发布时间:2021-05-15

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

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

示例演示:

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

 

作者:火星人~艾斯,公众号:艾斯的Axure峡谷

本文由 @火星人~艾斯 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

下一篇: 由8.25百度大更新看SEO如何应对之文章内容篇 上一篇: 韩国观光公社:2014年1-9月中国游客在韩免税店销售额占比超50%