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，添加页面载入事件，在页面载入事件下粘贴，更改触发事件为页面载入时，即可。

打开Axure8(axure7也一样)，默认是新创建的项目，找到 “动态面板”元件，如下图：

拖动元件到工作区，按照图指示的任意一个地方给动态面板命名：测试面板

双击动态面板元件，出现状态state1,双击进入到state1的编辑：

拖放一个图像元件到state1内，双击并找到准备的图片（红旗），这样第一个状态就编辑好了。

下面编辑第二个状态，注意看图，在右下方的 “概要”栏目内 找到state1右键“复制状态”，这样里面的元件大小、位置不会发生改变。复制成功后为便于下面的交互用例，将状态分别命名为：红旗、蓝旗。

然后点击蓝旗状态，将图片替换。

以上步骤完成后，开始编辑交互用例。双击红旗图片，出现如下图所示的交互用例，找到：鼠标单击时，并双击出现用例编辑面板。

选择 元件-->设置面板状态 ，然后按照图示选中 “测试面板”，并为其设置选择状态为：蓝旗。同时设定动画效果。

红旗状态编辑完成后，点击确定，按照下图所示在 case1下邮件复制用例，并粘贴到蓝旗状态下。然后按上一步的 *** 作，将蓝旗点击是的选择状态设置为：红旗。

最后F5预览，并点击图像测试效果

打开axure软件，拖入5个矩形框，并排列整齐，如下所示：

选中这5个框，设置组的名称为12345

对框1进行交互设计，选中1框，单击右键，d出以下窗口

选中交互样式，d出以下窗口

在鼠标悬停选项中，设置如下配置：

在选中选项中，设置如下配置：

单击确定。

然后添加框1的交互案例，添加鼠标单击时的case1：选中当前原件的值为true，再单击确定

按同样的 *** 作方式依次 *** 作框2-框5.

最后，选中框1，单击右键，在d出的对话框中勾选“选中”项，即可完成效果。

---