JS时间特效是网站开发中经常使用的技术,比如动态时间显示、倒计时等,下面介绍三款JS时间特效,分别是CountUp.js、Moment.js和Timeago.js。
CountUp.js是一个小型的、跨平台JavaScript库,用于轻松地实现计数器动画。步骤如下:
<script src="CountUp.js"></script>
<div id="myCountUp"></div>
var countUp = new CountUp('myCountUp', 0, 100);
countUp.start();
这将在“myCountUp”元素中创建一个计数器,初始值为0,目标值为100,并在页面加载后开始计数。
Moment.js是一个JavaScript日期库,可以轻松处理日期格式化、日期计算、时区转换、本地化等。步骤如下:
<script src="moment.js"></script>
const moment = require('moment');
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 是一个用于将现在的时间和日期转换为更友好的表示方式的小型JavaScript库。它使用自然语言,如“5分钟前”或“3天前”。
<script src="timeago.js"></script>
<span data-time="2019-05-23T05:13:08Z">2019-05-23T13:13:08</span>
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 转换为人性化的格式。
本文链接:http://task.lmcjl.com/news/11694.html