您的位置：首页 > 数码常识数码常识
axure9验证码倒计时（axure制作验证码倒计时）
2025-05-12人已围观
axure9验证码倒计时（axure制作验证码倒计时）
在产品注册页面，当点击发送验证码后，会进入倒计时，计时结束后才能重新点击发送，这个效果是如何做出来的呢？
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
示例演示：
上面就是小居数码小编今天给大家介绍的关于（axure制作验证码倒计时）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
怎么在电脑上设置倒计时时间（怎么在电脑上设置倒计时多少天）
java实现验证码功能（生成验证码的java代码）
国外接收国内短信验证码（海外短信验证码平台）
ppt如何弄倒计时效果（ppt怎么做出倒计时效果）
155898
在产品注册页面，当点击发送验证码后，会进入倒计时，计时结束后才能重新点击发送，这个效果是如何做出来的呢？
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
示例演示：
上面就是小居数码小编今天给大家介绍的关于（axure制作验证码倒计时）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
怎么在电脑上设置倒计时时间（怎么在电脑上设置倒计时多少天）
java实现验证码功能（生成验证码的java代码）
国外接收国内短信验证码（海外短信验证码平台）
ppt如何弄倒计时效果（ppt怎么做出倒计时效果）
155898
很赞哦！ ()
上一篇：2023年买什么手机最好（3款骁龙8gen2手机推荐2023）
下一篇：返回列表