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

Source: Internet
Author: User
Tags tagname

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.