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

设置自定义选择自定义背景就可以了。countdownapp这是一款在电影倒计时中出现的时钟软件，可以精准预测自己的死亡时间，属于虚构内容。软件色彩丰富，红色代表了倒计时即将降临，同时，也有另一个别称，叫做生命倒计时或者死亡之钟，帮助你准确记录出生天数，年龄计算和时间记录等，你可以自定义项目的选择以及倒数的时间，配上恐怖惊悚的音乐，有种恐怖大片来临的既视感，同时最大的意义就是让你珍惜生命。

最近做next.js项目，项目中有个倒计时的需求，于是上github上找了找发现了一个挺好的插件react-countdown推荐给大家，github地址： https://github.com/ndresx/react-countdown

npm install react-countdown --save

yarn add react-countdown

import Countdown from 'react-countdown'

<Countdown date={Date.now() + 10000} />

这是一个倒计时为10秒的示例，以毫秒为单位显示总时间差。

如果不对显示做处理默认在页面中的显示是：00:00:00:00对应->天、小时、分、秒

插件提供了两个属性：

1、daysInHours

Boolean类型的值默认为false；设为true时，它可以将天数转化为小时表示

2、zeroPadTime

Number类型的值，设置时间显示几位数，不够的用0填充，不设置这个属性的话当小时或者秒为一位数时展示一位数

另外react-countdown还给我们提供了一个renderer属性，它接收一个方法，如果我们有特殊需求如倒计时完成后要显示什么内容可以通过renderer接收的方法中实现。

在项目倒计时中一般会进行时间差值来计算剩余时间，我在项目中进行差值计算时遇到一个bug，在chrome中倒计时正常显示但在safari中倒计时没有显示，查了资料发现safari浏览器在时间处理上有一些兼容性问题。后端返回的时间格式是:2020-3-14 00:00:00,用new Date()转化后结果是Invalid Date，再getTime()得到的是NaN。原来safari不支持这种格式，把时间格式中的"-"全部替换为"/"就可以获取到时间戳了。

react-countdown插件中还提供了很多属性，有兴趣的可以上github上自行查阅。

---