其他代码

Timeago - 将datetime时间转化为模糊时间

阿里云

timeago.js 是一个非常简洁、轻量级、不到 2kb 的很简洁的 Javascript 库,用来将 datetime 时间转化成类似于*** 时间前的描述字符串,例如:“3 小时前”。

本地化支持,默认自带中文和英文语言,基本够用;

也想出现在这里?联系我们
创客主机

之前 xxx 时间前、xxx 时间后;

支持自动实时更新;

支持 npm 方式和浏览器 script 方式;

测试用例完善,执行良好;

中文版的模糊时间的显示格式如下:

  1. 刚刚
  2. 12秒前
  3. 3分钟前
  4. 2小时前
  5. 4天前
  6. 3周前
  7. 6月前
  8. 3年前
  9.  
  10. 12秒后
  11. 3分钟后
  12. 2小时后
  13. 24天后
  14. 6月后
  15. 3年后

使用方法:

在页面中引入 timeago.min.js 文件。

  1. <script src="path/to/timeago.min.js"></script>

使用 timeago 类的方法如下:

  1. var timeago = timeago();
  2. timeago.format('2016-09-10')

高级特性:

1. 设置相对日期
timeago 默认是相对于当前事件的,当然也可以自己设置相对的时间,如下所示:

  1. var timeago = timeago('2016-06-10 12:12:12'); // 在这里设置相对时间
  2. timeago.format('2016-06-12', 'zh_CN');

2. 格式化时间戳,字符串

  1. timeago().format(new Date().getTime() - 11 * 1000 * 60 * 60); // will get '11 hours ago'

3. 自动实时渲染
HTML 代码为:

  1. <div class="need_to_be_rendered" data-timeago="2016-09-10 09:20:00"></div>

Js 代码为:

  1. timeago().render(document.querySelectorAll('.need_to_be_rendered'), 'zh_CN');
  2. // 或者
  3. timeago().cancel()

API 方法 render 可以传入一个 DOM 节点或者数据,标示需要实时渲染这些节点。

API 方法 cancel 调用之后会清除所有的定时器方法,并且释放所有定时器资源。

被渲染的节点必须要有 data-timeago 属性,属性值为日期格式的字符串。

4. 本地化
默认的语言是英文 en, 这个库自带语言有 en 和 zh_CN(英文和中文)。

  1. var timeago = timeago();
  2. timeago.format('2016-06-12', 'zh_CN');

可以在构造函数中传入默认语言,也可以调用 setLocale 方法。

  1. var timeago = timeago(null, 'zh_CN');
  2. // 或者
  3. timeago.setLocale('zh_CN');

5. 注册本地语言
你可以自定义注册你的语言. 如下所示,所有的键值都必须存在,不然可能会出错。

  1. // 本地化的字典样式
  2. var test_local_dict = function(number, index) {
  3.   // number: xxx 时间前 / 后的数字;
  4.   // index: 下面数组的索引号;
  5.   return [
  6.     ['just now', 'a while'],
  7.     ['%s seconds ago', 'in %s seconds'],
  8.     ['1 minute ago', 'in 1 minute'],
  9.     ['%s minutes ago', 'in %s minutes'],
  10.     ['1 hour ago', 'in 1 hour'],
  11.     ['%s hours ago', 'in %s hours'],
  12.     ['1 day ago', 'in 1 day'],
  13.     ['%s days ago', 'in %s days'],
  14.     ['1 week ago', 'in 1 week'],
  15.     ['%s weeks ago', 'in %s weeks'],
  16.     ['1 month ago', 'in 1 month'],
  17.     ['%s months ago', 'in %s months'],
  18.     ['1 year ago', 'in 1 year'],
  19.     ['%s years ago', 'in %s years']
  20.   ][index];
  21. };
  22.  
  23. var timeago = timeago();
  24. timeago.register('test_local', test_local_dict);
  25.  
  26. timeago.format('2016-06-12', 'test_local');

timeago.js 模糊时间 js 插件的 github 地址为:https://github.com/hustcc/timeago.js

Timeago - 将 datetime 时间转化为模糊时间

已有 411 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!