JS时间特效最常用的三款

JS时间特效是网站开发中经常使用的技术，比如动态时间显示、倒计时等，下面介绍三款JS时间特效，分别是CountUp.js、Moment.js和Timeago.js。

CountUp.js

CountUp.js是一个小型的、跨平台JavaScript库，用于轻松地实现计数器动画。步骤如下：

1. 首先，从GitHub仓库中下载 CountUp.js 库，并将其添加到您的HTML文件中。

<script src="CountUp.js"></script>

1. 在HTML中添加一个容器元素。 让我们假设容器元素的 id 为 "myCountUp"。

<div id="myCountUp"></div>

1. 初始化CountUp.js：

var countUp = new CountUp('myCountUp', 0, 100);
countUp.start();

这将在“myCountUp”元素中创建一个计数器，初始值为0，目标值为100，并在页面加载后开始计数。

Moment.js

Moment.js是一个JavaScript日期库，可以轻松处理日期格式化、日期计算、时区转换、本地化等。步骤如下：

1. 下载 Moment.js 库，并将其添加到你的HTML文件中。

<script src="moment.js"></script>

1. 在JavaScript文件中将moment.js引入：

const moment = require('moment');

1. 针对日期进行处理，比如获取当前日期时间：

var now = moment();
console.log(now.format()); // "2019-05-23T13:13:08+08:00"，适用于本地环境。
console.log(now.utc().format()); // "2019-05-23T05:13:08Z"，适用于UTC时区。

Timeago.js

Timeago.js 是一个用于将现在的时间和日期转换为更友好的表示方式的小型JavaScript库。它使用自然语言，如“5分钟前”或“3天前”。

1. 下载 Timeago.js 库，并将其添加到您的HTML文件中。

<script src="timeago.js"></script>

1. 在需要使用的元素中添加 data-time 属性：

<span data-time="2019-05-23T05:13:08Z">2019-05-23T13:13:08</span>

1. 初始化 timeago.js：

timeago().render(document.querySelectorAll('span'));

这将会查找所有带有 data-time 属性的元素，并将其转换为更友好的表示方式。例如，上面的时间将显示为“5小时前”。

示例：

<p>
  修改时间：
  <span data-time="2019-05-23T05:13:08Z">2019-05-23T13:13:08</span>
  <script>
    timeago().render(document.querySelectorAll('span'));
  </script>
</p>

这将添加一个时间戳和一个格式化的时间戳，用 Timeago.js 转换为人性化的格式。