实例
<span class="time timeago" title="<fmt:formatDate value="${comment.createAt}" pattern="yyyy-MM-dd HH:mm:ss"/>"></span>
jQuery("span.timeago").timeago();
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
$.timeago = function(timestamp) {
if (timestamp instanceof Date) {
return inWords(timestamp);
} else if (typeof timestamp === "string") {
return inWords($.timeago.parse(timestamp));
} else if (typeof timestamp === "number") {
return inWords(new Date(timestamp));
} else {
return inWords($.timeago.datetime(timestamp));
}
};
var $t = $.timeago;
$.extend($.timeago, {
settings: {
refreshMillis: 60000,
allowFuture: false,
localeTitle: false,
cutoff: 0,
strings: {
prefixAgo: null,
prefixFromNow: null,
suffixAgo: "前",
suffixFromNow: "from now",
seconds: "1分钟",
minute: "1分钟",
minutes: "%d分钟",
hour: "1小时",
hours: "%d小时",
day: "1天",
days: "%d天",
month: "1月",
months: "%d月",
year: "1年",
years: "%d年",
wordSeparator: "",
numbers: []
}
},
inWords: function(distanceMillis) {
var $l = this.settings.strings;
var prefix = $l.prefixAgo;
var suffix = $l.suffixAgo;
if (this.settings.allowFuture) {
if (distanceMillis < 0) {
prefix = $l.prefixFromNow;
suffix = $l.suffixFromNow;
}
}
var seconds = Math.abs(distanceMillis) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var years = days / 365;
function substitute(stringOrFunction, number) {
var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
var value = ($l.numbers && $l.numbers[number]) || number;
return string.replace(/%d/i, value);
}
var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
seconds < 90 && substitute($l.minute, 1) ||
minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
minutes < 90 && substitute($l.hour, 1) ||
hours < 24 && substitute($l.hours, Math.round(hours)) ||
hours < 42 && substitute($l.day, 1) ||
days < 30 && substitute($l.days, Math.round(days)) ||
days < 45 && substitute($l.month, 1) ||
days < 365 && substitute($l.months, Math.round(days / 30)) ||
years < 1.5 && substitute($l.year, 1) ||
substitute($l.years, Math.round(years));
var separator = $l.wordSeparator || "";
if ($l.wordSeparator === undefined) { separator = " "; }
return $.trim([prefix, words, suffix].join(separator));
},
parse: function(iso8601) {
var s = $.trim(iso8601);
s = s.replace(/\.\d+/,""); // remove milliseconds
s = s.replace(/-/,"/").replace(/-/,"/");
s = s.replace(/T/," ").replace(/Z/," UTC");
s = s.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400
return new Date(s);
},
datetime: function(elem) {
var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
return $t.parse(iso8601);
},
isTime: function(elem) {
// jQuery's `is()` doesn't play well with HTML5 in IE
return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");
}
});
// functions that can be called via $(el).timeago('action')
// init is default when no action is given
// functions are called with context of a single element
var functions = {
init: function(){
var refresh_el = $.proxy(refresh, this);
refresh_el();
var $s = $t.settings;
if ($s.refreshMillis > 0) {
setInterval(refresh_el, $s.refreshMillis);
}
},
update: function(time){
$(this).data('timeago', { datetime: $t.parse(time) });
refresh.apply(this);
},
updateFromDOM: function(){
$(this).data('timeago', { datetime: $t.parse( $t.isTime(this) ? $(this).attr("datetime") : $(this).attr("title") ) });
refresh.apply(this);
}
};
$.fn.timeago = function(action, options) {
var fn = action ? functions[action] : functions.init;
if(!fn){
throw new Error("Unknown function name '"+ action +"' for timeago");
}
// each over objects here and call the requested function
this.each(function(){
fn.call(this, options);
});
return this;
};
function refresh() {
var data = prepareData(this);
var $s = $t.settings;
if (!isNaN(data.datetime)) {
if ( $s.cutoff == 0 || distance(data.datetime) < $s.cutoff) {
$(this).text(inWords(data.datetime));
}
}
return this;
}
function prepareData(element) {
element = $(element);
if (!element.data("timeago")) {
element.data("timeago", { datetime: $t.datetime(element) });
var text = $.trim(element.text());
if ($t.settings.localeTitle) {
element.attr("title", element.data('timeago').datetime.toLocaleString());
} else if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) {
element.attr("title", text);
}
}
return element.data("timeago");
}
function inWords(date) {
return $t.inWords(distance(date));
}
function distance(date) {
return (new Date().getTime() - date.getTime());
}
// fix for IE6 suckage
document.createElement("abbr");
document.createElement("time");
}));
分享到:
相关推荐
在JavaScript中,计算时间差并显示为“几分钟前”、“几小时前”、“几天前”、“几周前”或“几月前”的功能是一项常见的需求,主要用于动态更新信息的时效性,比如社交媒体的状态更新或者消息通知。这个功能的核心...
以上就是关于"JS原生态将时间转换成几分钟前几小时前几天前插件timeago"的详细解释,通过这个插件,你可以轻松地在你的Web应用中实现类似微博、微信等社交媒体那样的时间显示效果,使用户更直观地了解信息的时效性。
最近在做项目的时候,需要把后台返回的时间转换成几秒前、几分钟前、几小时前、几天前等的格式,接下来通过本文给大家分享JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式 ,需要的朋友可以参考...
在网页开发中,为了提供更好的用户体验,经常需要将精确的日期时间转换成更易于理解的相对时间差,比如“几分钟前”、“几小时前”或“几天前”。这在社交网络和论坛等实时更新内容的场景中尤其常见。本文将探讨如何...
在JavaScript(JS)中,将日期时间转换成“几个小时前”或“几天前”的格式,是一种常见的需求,尤其是在处理用户界面中的动态更新信息时。这个功能可以帮助用户更直观地理解信息的时效性。本篇文章将深入探讨如何...
总结来说,JavaScript显示“几分钟前”、“几天前”这类相对时间,通常需要使用Date对象进行时间计算,并结合适当的库或自定义函数进行格式化。在这个例子中,`timeago.js`库提供了一个方便的解决方案,使得开发者...
在朋友圈中,显示的时间戳通常会被转换成相对时间,例如“几小时前”、“几分钟前”或者“几秒钟前”。这种显示方式可以更直观地表明发布内容的时间,用户无需去计算具体的时间差。 现在,我们将在JavaScript中实现...
在Vue.js应用中,有时我们需要根据操作的创建时间和当前时间来展示相对应的时间差,例如显示“刚刚”、“几分钟前”或“几天前”等。这个功能可以通过自定义方法实现,例如在`methods`选项中定义一个名为`showtime`...
`getTimeText` 函数负责根据时间差返回相应的显示格式。它检查时间是否在过去的一周、前一天或今天,并根据这些条件返回相应的时间表示。例如,如果时间差大于一周,则显示完整的日期;如果在一周内,显示星期和...
在实际开发中,了解和熟练运用这些函数,可以方便地处理各种日期和时间相关的逻辑,例如验证用户输入的日期、计算时间差、安排定时任务等。理解并掌握这些基础的JavaScript时间函数,对编写高质量的前端应用至关重要...
在微信聊天消息列表中,时间显示的判断是一个关键的用户界面设计部分,它涉及到如何高效地展示和组织信息,使得用户能快速理解消息的时间顺序和上下文。在HTML5环境下,这一过程通常结合了JavaScript、CSS以及DOM...
这通常用于确定两个事件之间相隔多少天、小时等。 ##### 5. toString —— 转换为字符串 将日期对象转换为字符串表示形式,便于在页面上显示或其他文本处理任务。 ##### 6. toArray —— 转换为数组 将日期对象...
这个函数能够处理两种不同的时间格式,分别是年-月-日小时:分钟:秒和年/月/日小时:分钟:秒,并且可以根据需要返回不同精度的时间差,包括秒、分、小时和天。下面将详细介绍这个函数的各个组成部分和功能实现。 ...
计算两个时间点的毫秒数之差,并除以相应的除数(1000毫秒=1秒,60秒=1分钟,3600秒=1小时,3600*24秒=1天),最后返回计算出的时间差。 ### 日期处理的一些细节 在`dealDate`函数中,处理了日期中月份天数变化的...
JavaScript中的时间函数是编程中非常基础且实用的部分,它们允许开发者处理日期和时间的各种操作,如获取当前时间、比较日期、计算时间差等。在JavaScript中,这些功能主要通过内置的`Date`对象来实现。以下是一些...
在这个"jQuery将时间转换为几天前代码.zip"压缩包中,可能包含了一个实现将具体日期转换为“几天前”这种相对时间表达的jQuery插件或代码片段。 首先,我们需要理解日期和时间在JavaScript中的表示方式。JavaScript...
- 得到的时间差是以毫秒为单位的,可以根据需要转换为不同的时间单位(如天、小时、分钟或秒)。 ##### 3. **时间单位转换** - 为了方便展示时间差,作者定义了`GetTime`函数,该函数接收两个参数:毫秒数和希望...
然后,结合`getTimezoneOffset()`得到的偏移量,可以通过加减相应的时间差来实现从本地时间到其他时区时间的转换。例如,如果要获取夏威夷时间(假设夏威夷时区为GMT-10),则可以在UTC基础上减去3600000 * 10毫秒。...
- `getTimezoneOffset()`:返回本地时间与UTC时间的分钟差。 - `getUTC*()`系列方法:与上面类似,但返回UTC时间。 - `set*()`系列方法:用于设置日期和时间。 了解并熟练掌握这些JavaScript日期和时间函数,可以...