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

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

四、预览效果

示例下载：

示例演示：

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

作者：火星人～艾斯，公众号：艾斯的Axure峡谷

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

题图来自Unsplash，基于CC0协议