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

原型场景需求如下:
1、用户完成注册,跳转到上述提示页面,重新获取激活邮件功能链接进入倒计时,且变为不可用
2、倒计时结束后,去除倒计时数字,功能变为可用
3、用户点击后,再次进入倒计时,并变为不可用
4、完成上述循环
思路分析
实际上进入页面时和用户点击重发邮件,页面实现的功能是一致的,因此我们以用户点击后发生的事件作分析:
1、用户点击,重新发送功能变灰,并变成不可用,进入倒计时(前置条件:倒计时数据已完备;Axure功能:禁用、全局变量-用于倒计时显示、等待-用于计时、触发事件-用于循环、交互样式-禁用时变灰)
2、倒计时为0时,重新发送功能重新变为可用(此时全局变量已经变为0,需要恢复其为初始值,需要启用重新发送功能,设置文本不显示括号)
实现步骤
1、创建一个全局变量countdown,值设置为你想要的倒计时秒数,这里设置3秒。

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

上述事件即为:
(1)当全局变量countdown>=0时,禁用掉当前元件(使其不能被点击)
(2)设置文本为:点击此处重新获取激活邮件+countdown(即为剩余多少秒可再点击)
(3)等待1秒钟
(4)将countdown的值减少1(即过去了1秒)
(5)自动触发单击时事件(完成循环)
至此,我们就完成了倒计时按秒减少的功能,接下来要让倒计时结束后,元件恢复可点击的功能。
3、添加其他情形,即countdown小于0时

即:
(1)设置文本值,把countdown大于0时候的括号去掉
(2)启用当前元件
(3)把countdown的值设为初始值(倒计时开始的数值)
实际上,countdown在设置为初始值之前的值应为-1,原因在于“计数值大于0时”的case中最后会将countdown变为-1.
以上,我们完成了用户单击时的页面交互,还需要在页面载入时进行相同的设置。即是将单击事件改为页面载入事件即可。
4、复制单击时中刚设置好的2个case,添加页面载入事件,在页面载入事件下粘贴,更改触发事件为页面载入时,即可。

网友评论