生活中，我们经常看到网站、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峡谷。
更多Axure原型源文件下载：我的Axure作品集
示例下载：
https://pan.baidu.com/s/1uN7AiwbB604wdSqpA6pNZA
示例演示：
网友评论