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(/\.\d\d\d+/, ""); 
   timeStr = timeStr.replace(/-/, "/").replace(/-/, "/"); 
   timeStr = timeStr.replace(/T/, " ").replace(/Z/, " UTC"); 
   timeStr = timeStr.replace(/([\+\-]\d\d)\:?(\d\d)/, " $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 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程序设计有所帮助。