Timeago.js Plugin: jquery implements code instances where the time difference between minutes ago, hours ago, and days before the display effect

Front-end time personalization plugin Jquery.timeago.js

Keywords:

time formatting just n minutes ago N hours ago N days ago N months ago N years ago

Mm-dd hh:mm or Yyyy-mm-dd

Front End:

<spanclass="time" title="2016-07-23 12:02:32"></span>

　　

Usage:

$ (". Time"). Timeago ();

Plugin: jquery.timeago.js

!function (t) {function E (e) {var n = t.extend (O.settings, e), S = T.proxy (R, this); S (), N.refreshmillis > 0 && setinterval (S, n.refreshmillis)} function R () {var e = n (this        ), r = E.datetime; return IsNaN (r) | | T (this). Text (O.inwords (R)), this} function N (e) {return e = t (e), E.data ("Timeago") | | | e.data  ("Timeago", {Datetime:o.datetime (E)}), E.data ("Timeago")} function s (t) {return        (new date). GetTime ()-t.gettime ()} function I (t) {var e = new Date; return E.getmonth () > T.getmonth () | | E.getdate () > T.getdate ()} function A (t) {return (new Date). getFullYear () > T.getfullyear ()} D Ate.prototype.format = function (t) {var e = {"m+": This.getmonth () + 1, "d+": this.getdate (), "H +": this.gethours (), "m+": This.getminutes (), "s+": This.getseconds ()," q+ ": Math.floor ((This.getmonth () + 3)/3), S:this.getmilliseconds ()        };        /(y+)/.test (t) && (t = T.replace (regexp.$1, (this.getfullyear () + ""). substr (4-regexp.$1.length));  for (Var r in E) New RegExp ("(" + R + ")"). Test (T) && (t = t.replace (regexp.$1, 1 = = Regexp.$1.length?).        E[r]: ("XX" + e[r]). substr (("" + E[r]).));    Return T};                var o = {settings: {refreshmillis:6e4, relative:! 0, Strings: {                Suffixago: "Former", Seconds: "Just", minute: "1 minutes", minutes: "%d minutes", Hour: "1 hours", Hours: "%d hours", Days: "%d Day", months: "%d months", years : "%d Years", numbers: []}, Yearsagoformat: "Yyyy-mm-dd", Daysagoformat: "mm-d           D hh:mm "}, Inwords:function (e) { function R (E, R) {var n = t.isfunction (e)? e (R, u): E, s = g.numbers && g.num Bers[r] | |                R            Return N.replace (/%d/i, s)} var n = o.settings.relative;            if (!n && A (e)) return E.format (This.settings.yearsAgoFormat);            if (!n && I (e)) return E.format (This.settings.daysAgoFormat);              var u = S (e), G = this.settings.strings, H = g.suffixago, d = math.abs (u)/1e3  , L = d/60, F = l/60, M = f/24, c = m/30, M =            m/365; return words = > d? R (G.seconds, Math.floor (d)): > L? R (G.minutes, Math.floor (L)): > F? R (G.hours, Math.floor (f)): > M? R (G.days, Math.floor (m)): 365 > M? R (G.months, Math.floor (c)): R (G.years, Math.floor (M)), "just" = = words? Words:words + H}, Parse:function (e) {var r = T.trim (e); return r = R.replace (/\.\d+/, ""), R = R.replace (/-/, "/"). Replace (/-/, "/"), R = R.replace (/t/, "" ). Replace (/z/, "UTC"), R = R.replace (/([\+\-]\d\d) \:? ( \d\d)/, "$1$2"), new Date (R)}, Datetime:function (e) {var r = T (E). attr (O.istime (E ) ?            "datetime": "title");        return O.parse (R)}, Istime:function (e) {return "time" = = = T (e). Get (0). Tagname.tolowercase ()    }    }; T.fn.timeago = function (t) {return This.each (function () {E.call (this, T)}), this} } (Window.jquery)

jquery implements code instances where the time difference is displayed several minutes ago, hours ago, days before

Ext.: http://www.jb51.net/article/48912.htm

jquery Plugin Implementation

HTML code:

Copy CodeThe code is as follows:
<span class= "Time Timeago" title= "<fmt:formatdate value=" ${comment.createat} "pattern=" Yyyy-MM-dd HH:mm:ss "/ > "></span>

Calling code:

Copy CodeThe code is as follows:
JQuery ("Span.timeago"). Timeago ();

Plugin Source:

Copy CodeThe code is as follows:
(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: "Front",
Suffixfromnow: "From",
Seconds: "1 minutes",
minute: "1 minutes",
Minutes: "%d minutes",
Hour: "1 hours",
Hours: "%d hours",
Day: "1 days",
Days: "%d Day",
Month: "January",
Months: "%d months",
Year: "1 Years",
Years: "%d Years",
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 < && substitute ($l. seconds, Math.Round (seconds)) | |
Seconds < && substitute ($l. Minute, 1) | |
Minutes < && substitute ($l. Minutes, Math.Round (minutes)) | |
Minutes < && substitute ($l. Hour, 1) | |
Hours < && substitute ($l. Hours, Math.Round (hours)) | |
Hours < && substitute ($l. Day, 1) | |
Days < in && substitute ($l. Days, Math.Round (days)) | |
Days < all && 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 called via $ (EL). Timeago (' action ')
Init is default and no action is given
Functions is called with the 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). The data (' Timeago ', {datetime: $t. Parse ($t. Istime (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 of the objects here and 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");
}));

Timeago.js Plugin: jquery implements code instances where the time difference between minutes ago, hours ago, and days before the display effect