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

axure商城

生活中,我们经常看到网站、APP的注册页面,当点击发送验证码后,会进入倒计时,计时结束后才能重新点击发送。

一、页面布局

从左侧元件库拉入一个【矩形】作为验证码按钮,两个【文本框】作为手机输入框和短信验证码输入框,如下:

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

首先双击【验证码矩形】,将文本设置为:发送验证码;

其次,点击【顶部菜单栏】-》【项目】-》【全局变量】,点击弹窗中的“+”号,添加验证码的【全局变量】,这里命名为:captcha;想从哪个数字开始倒计时,即将此变量的默认值设置为哪个数字(此案例设为10);

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

二、添加交互

实际效果为:当点击验证码按钮时,验证码文案会变为“10秒后重新获取”,接下来变为9、8、7……秒后重新获取。

实现流程为:选中验证码矩形,双击右侧【属性】栏中的【鼠标点击时】;

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

选择左侧导航中【设置文本】-》勾选【当前元件】-》设置文本的值为“[[captcha]]秒后重新获取”;

因为之前已经将全局变量captcha的默认值设为10,所以预览时文本为 “10秒后重新获取”;

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

接下来需要设置等待事件,让文案每隔一秒,进行变化一次;

即选择左侧导航中【其他】-》【等待】-》等待时间设为“1000”毫秒;

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

然后让全部变量 “captcha” 减1,变为9、8、7……..,即再次选择左侧导航中【全局变量】-》【设置变量值】-》勾选【captcha】,值设置为:[[captcha-1]]。此时,“captcha” 的值已经变为“9”;

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

最后,需要重新触发最先的点击按钮交互事件,让验证码的文本发生变化,即变为:“9秒后重新获取”;并且重复执行该交互。

因此,再次选择左侧导航中【其他】-》【触发事件】-》勾选【当前元件】-》勾选【鼠标单击时】。

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

三、交互细节调整

正常情况下,应该是倒计时为0秒时停止计时,按钮文本变为“重新获取”。点击重新获取,则重新执行倒计时效果。

因此,需要对全局变量进行判断,当全局变量大于等于0时,执行上面的交互。否则(小于0),直接让文本变为 “重新获取”;

并且让全局变量【captcha】重新设置10,这样,重新点击【验证码】按钮时,由于全局变量【captcha】大于0,才能够重新执行鼠标点击的交互事件。

给case1添加条件,当变量值【captcha】>=0时,执行事件;

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

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

再次选中验证码矩形,双击右侧【属性】栏中的【鼠标点击时】,添加case2;选择左侧导航中【设置文本】-》勾选【当前元件】-》设置文本的值为“重新获取”;

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

选择左侧导航中【全局变量】-》【设置变量值】-》勾选【captcha】,值设置为:10。

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

四、预览效果

欢迎大家留言评论,也可以留下你期待看到的交互效果。

学习更多教程可以关注本人微信公众号:艾斯的Axure峡谷。

 

示例下载:

点击下载

示例演示:

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

 

20

评论:

6 条评论,访客:6 条,站长:0 条

100%好评

  • 好评:(100%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. avatar
      发布于: 

    为什么我预览的时候,我的倒计时[[captcha后重新获取]],而不是数字

发表评论