Js implementation time display several days ago, several hours ago, or several minutes ago method highlights _ javascript skills

This article mainly introduces how to implement JavaScript display several days ago, several hours ago, or a few minutes ago. The examples summarize and analyze the common ideas and skills for time display format conversion, you can refer to the following common methods for displaying js implementation time a few days ago, several hours ago, or a few minutes ago. Share it with you for your reference. The details are as follows:

Method 1:

My personal practice is to save the timestamp and then use the jq plug-in the front end for conversion, such as smart-time-ago.

Method 2:

(Via freemarker template) If you use freemarker template, you can write it like this, other templates, and so on.
Modify the conditions and output as needed, and pass your datetime in.

<# Macro timeline_dt datetime =. now> <# assign ct = (. now? Long-datetime? Long)/1000> <# if ct gte 31104000> <# -- n years ago -- >$ {(ct/31104000 )? Int} years ago <# t> <# elseif ct gte 2592000> <# -- n months ago -- >$ {(ct/2592000 )? Int} months ago <# t> <# elseif ct gte 86400*2> <# -- n days ago -- >$ {(ct/86400 )? Int} days ago <# t> <# elseif ct gte 86400> <# -- 1 day ago --> yesterday <# t> <# elseif ct gte 3600> <# -- n hours before --> ${(ct/3600 )? Int} hours ago <# t> <# elseif ct gte 60> <# -- n minutes ago -- >$ {(ct/60 )? Int} minutes ago <# t> <# elseif ct gt 0> <# -- n seconds ago -- >$ {ct? Int} seconds ago <# t> <# else>
  
  

Method 3:

Find a special plug-in PrettyTime

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

Method 4:

Custom Java method:

Private final static long minute = 60*1000; // private final static long hour = 60 * minute in 1 minute; // private final static long day = 24 * hour in 1 hour; // One day private final static long month = 31 * day; // month private final static long year = 12 * month; // year/**** return the date of the text description ** @ param Date * @ return */public static String getTimeFormatText (date) {if (date = null) {return null;} long diff = new Date (). getTime ()-date. getTime (); long r = 0; if (diff> year) {r = (diff/year); return r + "years ago" ;}if (diff> month) {r = (diff/month); return r + "Months Ago";} if (diff> day) {r = (diff/day ); return r + "Days Ago";} if (diff> hour) {r = (diff/hour); return r + "Hours Ago";} if (diff> minute) {r = (diff/minute); return r + "Minutes Ago";} return "just ";}

Method 5:

Use js plug-in: (original 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);

Using the js plug-in: (modified version (simple version) timeago. js) Chinese

(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 (ty Peof 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", minute: "1 minute", minutes: "% d minutes", hour: "1 hour", hours: "% d Hour", day: "1 day", days: "% d day", month: "January", months: "% d month", year: "1 year", years: "% d year", 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 & subs Titute ($ 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) {separa Tor = "";} 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)/, "$1 $2"); //-->-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 eleme Nt 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 ");}));

I hope this article will help you design javascript programs.