timeago.js-将datetime时间转化为模糊时间的js工具库

news/2024/12/28 20:53:08/文章来源:https://www.cnblogs.com/zzggqq/p/18635380

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

  • 本地化支持,默认自带中文和英文语言,基本够用;
  • 之前 xxx 时间前、xxx 时间后;
  • 支持自动实时更新;
  • 支持npm方式和浏览器script方式;
  • 测试用例完善,执行良好;

在线预览   下载

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

刚刚
12秒前
3分钟前
2小时前
4天前
3周前
6月前
3年前12秒后
3分钟后
2小时后
24天后
6月后
3年后                  

 

 使用方法

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

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

使用timeago类的方法如下:

var timeago = timeago();
timeago.format('2016-09-10')                  
 高级特性

1. 设置相对日期

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

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

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

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

3. 自动实时渲染

HTML代码为:

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

Js代码为:

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

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

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

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

4. 本地化

默认的语言是英文en, 这个库自带语言有enzh_CN(英文和中文)。

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

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

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

5. 注册本地语言

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

// 本地化的字典样式
var test_local_dict = function(number, index) {// number: xxx 时间前 / 后的数字;// index: 下面数组的索引号;return [['just now', 'a while'],['%s seconds ago', 'in %s seconds'],['1 minute ago', 'in 1 minute'],['%s minutes ago', 'in %s minutes'],['1 hour ago', 'in 1 hour'],['%s hours ago', 'in %s hours'],['1 day ago', 'in 1 day'],['%s days ago', 'in %s days'],['1 week ago', 'in 1 week'],['%s weeks ago', 'in %s weeks'],['1 month ago', 'in 1 month'],['%s months ago', 'in %s months'],['1 year ago', 'in 1 year'],['%s years ago', 'in %s years']][index];
};var timeago = timeago();
timeago.register('test_local', test_local_dict);timeago.format('2016-06-12', 'test_local');                  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/859790.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【日记】今天不是很忙(205 字)

正文一晃就快周五了。今天不是很忙,但也没做什么事情。无非就是原来塞满的工作时间节奏快了一些,现在慢了一些而已。我觉得我还是缺乏勇气。尤其是那种,在重大选择前做决策的勇气。也或许那个不叫勇气,叫做准备。每天的日记都会反省自己,但是依旧没什么进步呢。 成功日记:…

【启智社区】【大语言模型原理与实践】1.大语言模型的发展

大语言模型(Large Language Models,LLM)是一种由包含数百亿以上权重的深度神经网络构建的语言模型,使用自监督学习方法通过大量无标记文本进行训练。自2018年以来,包含Google、OpenAI、Meta、百度、华为等公司和研究机构都纷纷发布了包括BERT、GPT等在内多种模型,并在几乎…

简单实用的jQuery表单输入框浮动标签动画特效插件

phAnimate是一款简单实用的jquery表单输入框浮动标签动画特效插件。通过该插件,你可以非常轻松的为表单input元素添加浮动标签动画效果。在线预览 下载使用方法 在页面中引入jquery和phanimate.jquery.js文件。<script type="text/javascript" src="js/jqu…

FluentAssertions:C#单元测试断言库,让测试代码更加直观、易读!

推荐一个C#开源库,用于单元测试中的断言,它提供了一系列的扩展方法,使得单元测试的断言看起来更加自然流畅。 01 项目简介 FluentAssertions 是一个基于 .NET 的断言库,它提供了一种链式调用的方式来编写断言语句。支持框架.NET Framework 4.7、.NET Core 2.1、.NET Core 3…

记一次 .NET某工业视觉软件 崩溃分析

一:背景 1. 讲故事 前两天给训练营里的一位学员分析了一个dump,学员因为弄了一整天也没找到祸根,被我一下子弄出来了,极度想看看我是怎么分析的?由于在微信上不能一言两语表尽,干脆写一篇文章出来详细的讲讲吧,哈哈,训练营里的学员得有求必应哈。。。话不多说,我们一起…

ToDesk虚拟屏调整屏幕分辨率,显卡欺骗器、锁屏宝

ToDesk虚拟屏功能相信很多使用这款软件的小伙伴们或多或少都有听说或尝试过,它的作用可多了,既能充当多任务框扩充器、同时又能充当显卡欺骗器,并且还能作为高级隐私屏、锁屏宝,可谓是一款相当实用的神器! 当然,好用有用固然重要,但是用的更加舒服顺手也关键,以下小编就…

React Setup

useState是React的一个函数,返回一个数组。 useEffect(function(), []),别忘记第二个参数是空数组。 1. A first look at REACT以前网页由服务端渲染-> SPA Web Applications数据的同步更新很重要!React是什么?JavaScript ReviewArray Methods arr = [3,1,6,2,9], arr.so…

EV付费怎么办?ToDesk无线扩展屏免费使用

随着数字化办公、远程教育、多屏互动等需求的日益加增,扩展屏逐渐成为了提升工作效率及丰富学习、娱乐体验的重要工具。然而,市场上的扩展屏工具五花八门,并非每款都适用性强且好用无门槛。例如传统的EV扩展屏软件,就存在着一些明显的不足之处,其中的部分高级功能在实测中…

权限对象:B_BUP_PCPT

权限对象:B_BUP_PCPT 事务代码: BUPA_PRE_EOP CVP_PRE_EOP(需要SFW5激活SAP Information Lifecycle Management,事务码IRMPOL) 权限字段:ACTVT 05: 锁定供应商/客户 95:解锁供应商/客户本文来自博客园,作者:观兴,转载请注明原文链接:https://www.cnblogs.com/guanxi…

java8--方法--String--格式化--format

1.程序: package InputTest;import java.util.Scanner;public class InputTest021227 {public static void main(String[] args) { // English();Chiness();}public static void English(){Scanner in = new Scanner(System.in);System.out.print("What is your n…

GaussDB数据库中逻辑对象关系简析

初次接触openGauss或GaussDB数据库的逻辑对象,被其中的表空间、数据库、schema和用户之间的关系,以及授权管理困惑住了,与熟悉的MySQL数据库的逻辑对象又有明显的不同。本文旨在简要梳理下GaussDB数据库逻辑对象之间的关系,以加深理解。 1、GaussDB数据库逻辑对象 1.1 表空…

GaussDB数据库的备份与恢复

​ 1.逻辑备份-gs_dump gs_dump是一款用于导出数据库相关信息的工具,支持导出完整一致的数据库对象(数据库、模式、表、视图等)数据,同时不影响用户对数据库的正常访问。 备份sql语句gs_dump是openGauss用于导出数据库相关信息的工具,用户可以自定义导出一个数据库或其中的…