這篇文章主要介紹了js實現時間顯示幾天前、幾小時前或者幾分鐘前的方法,實例匯總分析了時間顯示格式轉換的常用思路與技巧,需要的朋友可以參考下
這裡匯總了js實現時間顯示幾天前、幾小時前或者幾分鐘前的常見方法。分享給大家供大家參考。具體如下：
方法一：
個人做法是保存時間戳，然後在前端用jq插件做轉換，比如 smart-time-ago
方法二：
(通過freemarker模板)如果用freemarker模板可以這樣寫，別的模板類推
根據自己的意願修改條件和輸出，把你的datetime傳進去即可
?
1 2 3 4 5 6 7 8 9 10 11 12 <#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
?
1 2 3 4 public static void main(String[] args) { PrettyTime p = new PrettyTime(); System.out.println(p.format(DateUtils.addDays(new Date(), 2))); }方法四：
自定義Java方法：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 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)
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 // 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)中文的
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 (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(/([+-]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 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程序設計有所幫助。