這篇文章主要介紹了js實現時間顯示幾天前、幾小時前或者幾分鐘前的方法,實例匯總分析了時間顯示格式轉換的常用思路與技巧,需要的朋友可以參考下

這里匯總了js實現時間顯示幾天前、幾小時前或者幾分鐘前的常見方法。分享給大家供大家參考。具體如下：

方法一：

個人做法是保存時間戳，然后在前端用jq插件做轉換，比如 smart-time-ago

方法二：

(通過freemarker模板)如果用freemarker模板可以這樣寫，別的模板類推

根據自己的意愿修改條件和輸出，把你的datetime傳進去即可

1. <#macro timeline_dt datetime=.now>  
2. <#assign ct = (.now?long-datetime?long)/1000>  
3. <#if ct gte 31104000><#--n年前-->${(ct/31104000)?int}年前  
4. <#t><#elseif ct gte 2592000><#--n月前-->${(ct/2592000)?int}個月前  
5. <#t><#elseif ct gte 86400*2><#--n天前-->${(ct/86400)?int}天前  
6. <#t><#elseif ct gte 86400><#--1天前-->昨天  
7. <#t><#elseif ct gte 3600><#--n小時前-->${(ct/3600)?int}小時前  
8. <#t><#elseif ct gte 60><#--n分鐘前-->${(ct/60)?int}分鐘前  
9. <#t><#elseif ct gt 0><#--n秒前-->${ct?int}秒前  
10. <#t><#else>剛剛  
11. </#if>  
12. </#macro>  

方法三：

找到一個專門的插件PrettyTime

1. public static void main(String[] args) {  
2. PrettyTime p = new PrettyTime();  
3. System.out.println(p.format(DateUtils.addDays(new Date(), 2))); 
4. }  

方法四：

自定義Java方法：

1. private final static long minute = 60 * 1000;// 1分鐘  
2. private final static long hour = 60 * minute;// 1小時  
3. private final static long day = 24 * hour;// 1天  
4. private final static long month = 31 * day;// 月  
5. private final static long year = 12 * month;// 年  
6. /**  
7. * 返回文字描述的日期  
8. *  
9. * @param date  
10. * @return  
11. */ 
12. public static String getTimeFormatText(Date date) {  
13. if (date == null) {  
14. return null;  
15. }  
16. long diff = new Date().getTime() - date.getTime();  
17. long r = 0;  
18. if (diff > year) {  
19. r = (diff / year);  
20. return r + "年前";  
21. }  
22. if (diff > month) {  
23. r = (diff / month);  
24. return r + "個月前";  
25. }  
26. if (diff > day) {  
27. r = (diff / day);  
28. return r + "天前";  
29. }  
30. if (diff > hour) {  
31. r = (diff / hour);  
32. return r + "個小時前";  
33. }  
34. if (diff > minute) {  
35. r = (diff / minute);  
36. return r + "分鐘前";  
37. }  
38. return "剛剛";  
39. } 

方法五：

使用js插件：(原版的timeago.js)

1. // Smart Time Ago v0.1.0  
2. // Copyright 2012, Terry Tai, Pragmatic.ly  
3. // https://pragmatic.ly/  
4. // Licensed under the MIT license.  
5. // https://github.com/pragmaticly/smart-time-ago/blob/master/LICENSE  
6. (function() {  
7. var TimeAgo;  
8. TimeAgo = (function() {  
9. function TimeAgo(element, options) {  
10. this.startInterval = 60000;  
11. this.init(element, options);  
12. }  
13. TimeAgo.prototype.init = function(element, options) {  
14. this.$element = $(element);  
15. this.options = $.extend({}, $.fn.timeago.defaults, options);  
16. this.updateTime();  
17. return this.startTimer();  
18. };  
19. TimeAgo.prototype.startTimer = function() {  
20. var self;  
21. self = this;  
22. return this.interval = setInterval((function() {  
23. return self.refresh();  
24. }), this.startInterval);  
25. };  
26. TimeAgo.prototype.stopTimer = function() {  
27. return clearInterval(this.interval);  
28. };  
29. TimeAgo.prototype.restartTimer = function() {  
30. this.stopTimer();  
31. return this.startTimer();  
32. };  
33. TimeAgo.prototype.refresh = function() {  
34. this.updateTime();  
35. return this.updateInterval();  
36. };  
37. TimeAgo.prototype.updateTime = function() {  
38. var self;  
39. self = this;  
40. return this.$element.findAndSelf(this.options.selector).each(function() { 
41. var timeAgoInWords;  
42. timeAgoInWords = self.timeAgoInWords($(this).attr(self.options.attr));  
43. return $(this).html(timeAgoInWords);  
44. });  
45. };  
46. TimeAgo.prototype.updateInterval = function() {  
47. var filter, newestTime, newestTimeInMinutes, newestTimeSrc;  
48. if (this.$element.findAndSelf(this.options.selector).length > 0) { 
49. if (this.options.dir === "up") {  
50. filter = ":first";  
51. } else if (this.options.dir === "down") {  
52. filter = ":last";  
53. }  
54. newestTimeSrc = this.$element.findAndSelf(this.options.selector).filter(filter).attr(this.options.attr);  
55. newestTime = this.parse(newestTimeSrc);  
56. newestTimeInMinutes = this.getTimeDistanceInMinutes(newestTime); 
57. if (newestTimeInMinutes >= 0 && newestTimeInMinutes <= 44 && this.startInterval !== 60000) {  
58. this.startInterval = 60000;  
59. return this.restartTimer();  
60. } else if (newestTimeInMinutes >= 45 && newestTimeInMinutes <= 89 && this.startInterval !== 60000 * 22) {  
61. this.startInterval = 60000 * 22;  
62. return this.restartTimer();  
63. } else if (newestTimeInMinutes >= 90 && newestTimeInMinutes <= 2519 && this.startInterval !== 60000 * 30) {  
64. this.startInterval = 60000 * 30;  
65. return this.restartTimer();  
66. } else if (newestTimeInMinutes >= 2520 && this.startInterval !== 60000 * 60 * 12) {  
67. this.startInterval = 60000 * 60 * 12;  
68. return this.restartTimer();  
69. }  
70. }  
71. };  
72. TimeAgo.prototype.timeAgoInWords = function(timeString) {  
73. var absolutTime;  
74. absolutTime = this.parse(timeString);  
75. return this.distanceOfTimeInWords(absolutTime) + (this.options.lang.suffix);  
76. };  
77. TimeAgo.prototype.parse = function(iso8601) {  
78. var timeStr;  
79. timeStr = $.trim(iso8601);  
80. timeStr = timeStr.replace(//./d/d/d+/, "");  
81. timeStr = timeStr.replace(/-/, "/").replace(/-/, "/");  
82. timeStr = timeStr.replace(/T/, " ").replace(/Z/, " UTC");  
83. timeStr = timeStr.replace(/([/+/-]/d/d)/:?(/d/d)/, " $1$2");  
84. return new Date(timeStr);  
85. };  
86. TimeAgo.prototype.getTimeDistanceInMinutes = function(absolutTime) { 
87. var timeDistance;  
88. timeDistance = new Date().getTime() - absolutTime.getTime();  
89. return Math.round((Math.abs(timeDistance) / 1000) / 60);  
90. };  
91. TimeAgo.prototype.distanceOfTimeInWords = function(absolutTime) {  
92. var dim;  
93. dim = this.getTimeDistanceInMinutes(absolutTime);  
94. if (dim === 0) {  
95. return "" + this.options.lang.prefixes.lt + " " + this.options.lang.units.minute;  
96. } else if (dim === 1) {  
97. return "1 " + this.options.lang.units.minute;  
98. } else if (dim >= 2 && dim <= 44) {  
99. return "" + dim + " " + this.options.lang.units.minutes;  
100. } else if (dim >= 45 && dim <= 89) {  
101. return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.hour;  
102. } else if (dim >= 90 && dim <= 1439) {  
103. return "" + this.options.lang.prefixes.about + " " + (Math.round(dim / 60)) + " " + this.options.lang.units.hours;  
104. } else if (dim >= 1440 && dim <= 2519) {  
105. return "1 " + this.options.lang.units.day;  
106. } else if (dim >= 2520 && dim <= 43199) {  
107. return "" + (Math.round(dim / 1440)) + " " + this.options.lang.units.days;  
108. } else if (dim >= 43200 && dim <= 86399) {  
109. return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.month;  
110. } else if (dim >= 86400 && dim <= 525599) {  
111. return "" + (Math.round(dim / 43200)) + " " + this.options.lang.units.months;  
112. } else if (dim >= 525600 && dim <= 655199) {  
113. return "" + this.options.lang.prefixes.about + " 1 " + this.options.lang.units.year;  
114. } else if (dim >= 655200 && dim <= 914399) {  
115. return "" + this.options.lang.prefixes.over + " 1 " + this.options.lang.units.year;  
116. } else if (dim >= 914400 && dim <= 1051199) {  
117. return "" + this.options.lang.prefixes.almost + " 2 " + this.options.lang.units.years;  
118. } else {  
119. return "" + this.options.lang.prefixes.about + " " + (Math.round(dim / 525600)) + " " + this.options.lang.units.years;  
120. }  
121. };  
122. return TimeAgo;  
123. })();  
124. $.fn.timeago = function(options) {  
125. if (options == null) options = {};  
126. return this.each(function() {  
127. var $this, data;  
128. $this = $(this);  
129. data = $this.data("timeago");  
130. if (!data) $this.data("timeago", new TimeAgo(this, options));  
131. if (typeof options === 'string') return data[options]();  
132. });  
133. };  
134. $.fn.findAndSelf = function(selector) {  
135. return this.find(selector).add(this.filter(selector));  
136. };  
137. $.fn.timeago.Constructor = TimeAgo;  
138. $.fn.timeago.defaults = {  
139. selector: 'time.timeago',  
140. attr: 'datetime',  
141. dir: 'up',  
142. lang: {  
143. units: {  
144. second: "second",  
145. seconds: "seconds",  
146. minute: "minute",  
147. minutes: "minutes",  
148. hour: "hour",  
149. hours: "hours",  
150. day: "day",  
151. days: "days",  
152. month: "month",  
153. months: "months",  
154. year: "year",  
155. years: "years" 
156. },  
157. prefixes: {  
158. lt: "less than a",  
159. about: "about",  
160. over: "over",  
161. almost: "almost" 
162. },  
163. suffix: ' ago' 
164. }  
165. };  
166. }).call(this); 

使用js插件：(改裝版(簡喲版)timeago.js)中文的

1. (function (factory) {  
2. if (typeof define === 'function' && define.amd) {  
3. // AMD. Register as an anonymous module.  
4. define(['jquery'], factory);  
5. } else {  
6. // Browser globals  
7. factory(jQuery);  
8. }  
9. }(function ($) {  
10. $.timeago = function(timestamp) {  
11. if (timestamp instanceof Date) {  
12. return inWords(timestamp);  
13. } else if (typeof timestamp === "string") {  
14. return inWords($.timeago.parse(timestamp));  
15. } else if (typeof timestamp === "number") {  
16. return inWords(new Date(timestamp));  
17. } else {  
18. return inWords($.timeago.datetime(timestamp));  
19. }  
20. };  
21. var $t = $.timeago;  
22. $.extend($.timeago, {  
23. settings: {  
24. refreshMillis: 60000,  
25. allowFuture: false,  
26. localeTitle: false,  
27. cutoff: 0,  
28. strings: {  
29. prefixAgo: null,  
30. prefixFromNow: null,  
31. suffixAgo: "前",  
32. suffixFromNow: "from now",  
33. seconds: "1分鐘",  
34. minute: "1分鐘",  
35. minutes: "%d分鐘",  
36. hour: "1小時",  
37. hours: "%d小時",  
38. day: "1天",  
39. days: "%d天",  
40. month: "1月",  
41. months: "%d月",  
42. year: "1年",  
43. years: "%d年",  
44. wordSeparator: "",  
45. numbers: []  
46. }  
47. },  
48. inWords: function(distanceMillis) {  
49. var $l = this.settings.strings;  
50. var prefix = $l.prefixAgo;  
51. var suffix = $l.suffixAgo;  
52. if (this.settings.allowFuture) {  
53. if (distanceMillis < 0) {  
54. prefix = $l.prefixFromNow;  
55. suffix = $l.suffixFromNow;  
56. }  
57. }  
58. var seconds = Math.abs(distanceMillis) / 1000;  
59. var minutes = seconds / 60;  
60. var hours = minutes / 60;  
61. var days = hours / 24;  
62. var years = days / 365;  
63. function substitute(stringOrFunction, number) {  
64. var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;  
65. var value = ($l.numbers && $l.numbers[number]) || number;  
66. return string.replace(/%d/i, value);  
67. }  
68. var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||  
69. seconds < 90 && substitute($l.minute, 1) ||  
70. minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||  
71. minutes < 90 && substitute($l.hour, 1) ||  
72. hours < 24 && substitute($l.hours, Math.round(hours)) ||  
73. hours < 42 && substitute($l.day, 1) ||  
74. days < 30 && substitute($l.days, Math.round(days)) ||  
75. days < 45 && substitute($l.month, 1) ||  
76. days < 365 && substitute($l.months, Math.round(days / 30)) ||  
77. years < 1.5 && substitute($l.year, 1) ||  
78. substitute($l.years, Math.round(years));  
79. var separator = $l.wordSeparator || "";  
80. if ($l.wordSeparator === undefined) { separator = " "; }  
81. return $.trim([prefix, words, suffix].join(separator));  
82. },  
83. parse: function(iso8601) {  
84. var s = $.trim(iso8601);  
85. s = s.replace(//./d+/,""); // remove milliseconds  
86. s = s.replace(/-/,"/").replace(/-/,"/");  
87. s = s.replace(/T/," ").replace(/Z/," UTC");  
88. s = s.replace(/([/+/-]/d/d)/:?(/d/d)/," $1$2"); // -04:00 -> -0400 
89. return new Date(s);  
90. },  
91. datetime: function(elem) {  
92. var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");  
93. return $t.parse(iso8601);  
94. },  
95. isTime: function(elem) {  
96. // jQuery's `is()` doesn't play well with HTML5 in IE  
97. return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");  
98. }  
99. });  
100. // functions that can be called via $(el).timeago('action')  
101. // init is default when no action is given  
102. // functions are called with context of a single element  
103. var functions = {  
104. init: function(){  
105. var refresh_el = $.proxy(refresh, this);  
106. refresh_el();  
107. var $s = $t.settings;  
108. if ($s.refreshMillis > 0) {  
109. setInterval(refresh_el, $s.refreshMillis);  
110. }  
111. },  
112. update: function(time){  
113. $(this).data('timeago', { datetime: $t.parse(time) });  
114. refresh.apply(this);  
115. },  
116. updateFromDOM: function(){  
117. $(this).data('timeago', { datetime: $t.parse( $t.isTime(this) ? $(this).attr("datetime") : $(this).attr("title") ) });  
118. refresh.apply(this);  
119. }  
120. };  
121. $.fn.timeago = function(action, options) {  
122. var fn = action ? functions[action] : functions.init;  
123. if(!fn){  
124. throw new Error("Unknown function name '"+ action +"' for timeago");  
125. }  
126. // each over objects here and call the requested function  
127. this.each(function(){  
128. fn.call(this, options);  
129. });  
130. return this;  
131. };  
132. function refresh() {  
133. var data = prepareData(this);  
134. var $s = $t.settings;  
135. if (!isNaN(data.datetime)) {  
136. if ( $s.cutoff == 0 || distance(data.datetime) < $s.cutoff) {  
137. $(this).text(inWords(data.datetime));  
138. }  
139. }  
140. return this;  
141. }  
142. function prepareData(element) {  
143. element = $(element);  
144. if (!element.data("timeago")) {  
145. element.data("timeago", { datetime: $t.datetime(element) });  
146. var text = $.trim(element.text());  
147. if ($t.settings.localeTitle) {  
148. element.attr("title", element.data('timeago').datetime.toLocaleString());  
149. } else if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) {  
150. element.attr("title", text);  
151. }  
152. }  
153. return element.data("timeago");  
154. }  
155. function inWords(date) {  
156. return $t.inWords(distance(date));  
157. }  
158. function distance(date) {  
159. return (new Date().getTime() - date.getTime());  
160. }  
161. // fix for IE6 suckage  
162. document.createElement("abbr");  
163. document.createElement("time");  
164. })); 

希望本文所述對大家的javascript程序設計有所幫助。