首页 > 语言 > JavaScript > 正文

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

2024-05-06 16:21:02
字体：大 中 小
来源：转载
供稿：网友

这篇文章主要介绍了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程序设计有所帮助。

上一篇：Jquery解析json字符串及json数组的方法

下一篇：jquery简单实现外部链接用新窗口打开的方法

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有