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

前端技术 2023/09/04 JavaScript

这里汇总了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程序设计有所帮助。

本文地址:https://www.stayed.cn/item/9700

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。