Axure 9 实现倒计时功能

需求场景

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


原型场景需求如下:
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,添加页面载入事件,在页面载入事件下粘贴,更改触发事件为页面载入时,即可。


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,934评论 0 17
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,473评论 1 45
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,924评论 1 11
  • 开心一笑 【看大家都在抵制韩国,我翻遍家里也没找到有啥韩货可砸的,最后下楼把楼下姓韩的邻居打了一顿,因为他名叫韩国...
    架构师启示录阅读 9,758评论 2 4
  • 前几天,我们已经编译安装好了我们的freeswitch。对于小白来说,要让它能工作呢!目的就是实现分机互打,呼入呼...
    FreeSWITCH研习社阅读 7,977评论 0 3

友情链接更多精彩内容