js实现时间显示几天前、几小时前或者几分钟前的方法集锦

这里汇总了js实现时间显示几天前、几小时前或者几分钟前的常见方法。分享给大家供大家参考。具体如下：
方法一：
个人做法是保存时间戳，然后在前端用jq插件做转换，比如 smart-time-ago
方法二：
（通过freemarker模板）如果用freemarker模板可以这样写，别的模板类推
根据自己的意愿修改条件和输出，把你的datetime传进去即可

<#macro timeline_dt datetime=.now> <#assign ct = （.now?long-datetime?long）/1000> <#if ct gte 31104000><#--n年前-->${（ct/31104000）?int}年前 <#t><#elseif ct gte 2592000><#--n月前-->${（ct/2592000）?int}个月前 <#t><#elseif ct gte 86400*2><#--n天前-->${（ct/86400）?int}天前 <#t><#elseif ct gte 86400><#--1天前-->昨天 <#t><#elseif ct gte 3600><#--n小时前-->${（ct/3600）?int}小时前 <#t><#elseif ct gte 60><#--n分钟前-->${（ct/60）?int}分钟前 <#t><#elseif ct gt 0><#--n秒前-->${ct?int}秒前 <#t><#else>刚刚 </#if> </#macro>

方法三：
找到一个专门的插件PrettyTime

public static void main（String[] args） { PrettyTime p = new PrettyTime（）; System.out.println（p.format（DateUtils.addDays（new Date（）, 2）））;}

方法四：
自定义Java方法：

private final static long minute = 60 * 1000;// 1分钟 private final static long hour = 60 * minute;// 1小时 private final static long day = 24 * hour;// 1天 private final static long month = 31 * day;// 月 private final static long year = 12 * month;// 年 /** * 返回文字描述的日期 * * @param date * @return */ public static String getTimeFormatText（Date date） { if （date == null） { return null; } long diff = new Date（）.getTime（） - date.getTime（）; long r = 0; if （diff > year） { r = （diff / year）; return r + "年前"; } if （diff > month） { r = （diff / month）; return r + "个月前"; } if （diff > day） { r = （diff / day）; return r + "天前"; } if （diff > hour） { r = （diff / hour）; return r + "个小时前"; } if （diff > minute） { r = （diff / minute）; return r + "分钟前"; } return "刚刚"; }

方法五：
使用js插件：（原版的timeago.js）

// Smart Time Ago v0.1.0 // Copyright 2012, Terry Tai, Pragmatic.ly // https://pragmatic.ly/ // Licensed under the MIT license. // https://github.com/pragmaticly/smart-time-ago/blob/master/LICENSE （function（） {var TimeAgo;TimeAgo = （function（） { function TimeAgo（element, options） {this.startInterval = 60000;this.init（element, options）; } TimeAgo.prototype.init = function（element, options） {this.$element = $（element）;this.options = $.extend（{}, $.fn.timeago.defaults, options）;this.updateTime（）;return this.startTimer（）; }; TimeAgo.prototype.startTimer = function（） {var self;self = this;return this.interval = setInterval（（function（） { return self.refresh（）;}）, this.startInterval）; }; TimeAgo.prototype.stopTimer = function（） {return clearInterval（this.interval）; }; TimeAgo.prototype.restartTimer = function（） {this.stopTimer（）;return this.startTimer（）; }; TimeAgo.prototype.refresh = function（） {this.updateTime（）;return this.updateInterval（）; }; TimeAgo.prototype.updateTime = function（） {var self;self = this;return this.$element.findAndSelf（this.options.selector）.each（function（） {var timeAgoInWords; timeAgoInWords = self.timeAgoInWords（$（this）.attr（self.options.attr））; return $（this）.html（timeAgoInWords）;}）; }; TimeAgo.prototype.updateInterval = function（） {var filter, newestTime, newestTimeInMinutes, newestTimeSrc;if （this.$element.findAndSelf（this.options.selector）.length > 0） {if （this.options.dir === "up"） {filter = ":first"; } else if （this.options.dir === "down"） {filter = ":last"; } newestTimeSrc = this.$element.findAndSelf（this.options.selector）.filter（filter）.attr（this.options.attr）; newestTime = this.parse（newestTimeSrc）; newestTimeInMinutes = this.getTimeDistanceInMinutes（newestTime）;if （newestTimeInMinutes >= 0 && newestTimeInMinutes <= 44 && this.startInterval ！== 60000） {this.startInterval = 60000;return this.restartTimer（）; } else if （newestTimeInMinutes >= 45 && newestTimeInMinutes <= 89 && this.startInterval ！== 60000 * 22） {this.startInterval = 60000 * 22;return this.restartTimer（）; } else if （newestTimeInMinutes >= 90 && newestTimeInMinutes <= 2519 && this.startInterval ！== 60000 * 30） {this.startInterval = 60000 * 30;return this.restartTimer（）; } else if （newestTimeInMinutes >= 2520 && this.startInterval ！== 60000 * 60 * 12） {this.startInterval = 60000 * 60 * 12;return this.restartTimer（）; }} }; TimeAgo.prototype.timeAgoInWords = function（timeString） {var absolutTime;absolutTime = this.parse（timeString）;return this.distanceOfTimeInWords（absolutTime） + （this.options.lang.suffix）; }; TimeAgo.prototype.parse = function（iso8601） {var timeStr;timeStr = $.trim（iso8601）;timeStr = timeStr.replace（/.ddd+/, ""）;timeStr = timeStr.replace（/-/, "/"）.replace（/-/, "/"）;timeStr = timeStr.replace（/T/, " "）.replace（/Z/, " UTC"）;timeStr = timeStr.replace（/（[+-]dd）:?（dd）/, " $1$2"）;return new Date（timeStr）; }; TimeAgo.prototype.getTimeDistanceInMinutes = function（absolutTime） { var timeDistance;timeDistance = new Date（）.getTime（） - absolutTime.getTime（）;return Math.round（（Math.abs（timeDistance） / 1000） / 60）; }; TimeAgo.prototype.distanceOfTimeInWords = function（absolutTime） {var dim;dim = this.getTimeDistanceInMinutes（absolutTime）;if （dim === 0） { return "" + this.options.lang.prefixes.lt + " " + this.options.lang.units.minute;} else if （dim === 1） { return "1 " + this.options.lang.units.minute;} else if （dim >= 2 && dim <= 44） { return "" + dim + " " + this.options.lang.units.minutes;} else if （dim >= 45 && dim <= 89） { return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.hour;} else if （dim >= 90 && dim <= 1439） { return "" + this.options.lang.prefixes.about + " " + （Math.round（dim / 60）） + " " + this.options.lang.units.hours;} else if （dim >= 1440 && dim <= 2519） { return "1 " + this.options.lang.units.day;} else if （dim >= 2520 && dim <= 43199） { return "" + （Math.round（dim / 1440）） + " " + this.options.lang.units.days;} else if （dim >= 43200 && dim <= 86399） { return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.month;} else if （dim >= 86400 && dim <= 525599） { return "" + （Math.round（dim / 43200）） + " " + this.options.lang.units.months;} else if （dim >= 525600 && dim <= 655199） { return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.year;} else if （dim >= 655200 && dim <= 914399） { return "" + this.options.lang.prefixes.over + " 1 " + this.options.lang.units.year;} else if （dim >= 914400 && dim <= 1051199） { return "" + this.options.lang.prefixes.almost + " 2 " + this.options.lang.units.years;} else { return "" + this.options.lang.prefixes.about + " " + （Math.round（dim / 525600）） + " " + this.options.lang.units.years;} }; return TimeAgo;}）（）;$.fn.timeago = function（options） { if （options == null） options = {}; return this.each（function（） {var $this, data;$this = $（this）;data = $this.data（"timeago"）;if （！data） $this.data（"timeago", new TimeAgo（this, options））;if （typeof options === "string"） return data[options]（）; }）;};$.fn.findAndSelf = function（selector） { return this.find（selector）.add（this.filter（selector））;};$.fn.timeago.Constructor = TimeAgo;$.fn.timeago.defaults = { selector: "time.timeago", attr: "datetime", dir: "up", lang: {units: { second: "second", seconds: "seconds", minute: "minute", minutes: "minutes", hour: "hour", hours: "hours", day: "day", days: "days", month: "month", months: "months", year: "year", years: "years"},prefixes: { lt: "less than a", about: "about", over: "over", almost: "almost"},suffix: " ago" }}; }）.call（this）;

使用js插件：（改装版（简哟版）timeago.js）中文的

（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 millisecondss = s.replace（/-/,"/"）.replace（/-/,"/"）;s = s.replace（/T/," "）.replace（/Z/," UTC"）;s = s.replace（/（[+-]dd）:?（dd）/," $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 IEreturn $（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 elementvar 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 suckagedocument.createElement（"abbr"）;document.createElement（"time"）; }））;

希望本文所述对大家的javascript程序设计有所帮助。