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

这里汇总了js实现时间显示几天前、几小时前或者几分钟前的常见方法。分享给大家供大家参考。具体如下：

方法一：

个人做法是保存时间戳，然后在前端用jq插件做转换，比如 smart-time-ago

方法二：

（通过freemarker模板）如果用freemarker模板可以这样写，别的模板类推
根据自己的意愿修改条件和输出，把你的datetime传进去即可

 
 
${(ct/31104000)?int}年前 
  ${(ct/2592000)?int}个月前 
  ${(ct/86400)?int}天前 
  昨天 
  ${(ct/3600)?int}小时前 
  ${(ct/60)?int}分钟前 
  ${ct?int}秒前 
  刚刚 
#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 = 45 && newestTimeInMinutes = 90 && 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 = 45 && dim = 90 && dim = 1440 && dim = 2520 && dim = 43200 && dim = 86400 && dim = 525600 && dim = 655200 && dim = 914400 && dim 

使用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  -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)  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程序设计有所帮助。