Axure 9 实现倒计时功能

需求场景

在用户使用邮箱注册后,通常会跳转到一个邮箱验证的页面,用户可以在这里重新向自己的邮箱发送邮件。为了防止恶意注册,通常会对重发邮件功能有个时间间隔限制。


原型场景需求如下:
1、用户完成注册,跳转到上述提示页面,重新获取激活邮件功能链接进入倒计时,且变为不可用
2、倒计时结束后,去除倒计时数字,功能变为可用
3、用户点击后,再次进入倒计时,并变为不可用
4、完成上述循环

思路分析

实际上进入页面时和用户点击重发邮件,页面实现的功能是一致的,因此我们以用户点击后发生的事件作分析:
1、用户点击,重新发送功能变灰,并变成不可用,进入倒计时(前置条件:倒计时数据已完备;Axure功能:禁用、全局变量-用于倒计时显示、等待-用于计时、触发事件-用于循环、交互样式-禁用时变灰)
2、倒计时为0时,重新发送功能重新变为可用(此时全局变量已经变为0,需要恢复其为初始值,需要启用重新发送功能,设置文本不显示括号)

实现步骤

1、创建一个全局变量countdown,值设置为你想要的倒计时秒数,这里设置3秒。


Axure 9 实现倒计时功能_第1张图片

2、选中“点击此处重新获取激活邮件”元件,添加单击时交互,添加case,当countdown>=0时的以下事件:


Axure 9 实现倒计时功能_第2张图片

上述事件即为:
(1)当全局变量countdown>=0时,禁用掉当前元件(使其不能被点击)
(2)设置文本为:点击此处重新获取激活邮件+countdown(即为剩余多少秒可再点击)
(3)等待1秒钟
(4)将countdown的值减少1(即过去了1秒)
(5)自动触发单击时事件(完成循环)

至此,我们就完成了倒计时按秒减少的功能,接下来要让倒计时结束后,元件恢复可点击的功能。

3、添加其他情形,即countdown小于0时


Axure 9 实现倒计时功能_第3张图片

即:
(1)设置文本值,把countdown大于0时候的括号去掉
(2)启用当前元件
(3)把countdown的值设为初始值(倒计时开始的数值)

实际上,countdown在设置为初始值之前的值应为-1,原因在于“计数值大于0时”的case中最后会将countdown变为-1.
以上,我们完成了用户单击时的页面交互,还需要在页面载入时进行相同的设置。即是将单击事件改为页面载入事件即可。

4、复制单击时中刚设置好的2个case,添加页面载入事件,在页面载入事件下粘贴,更改触发事件为页面载入时,即可。


Axure 9 实现倒计时功能_第4张图片

你可能感兴趣的:(Axure 9 实现倒计时功能)