JS, jquery to achieve a few minutes ago, a few hours ago, a few days before the time difference display effect of code instances to share _javascript skills

Source: Internet
Author: User

To achieve similar functions, using JS can be implemented as follows:

One, JavaScript function implementation:
Example 1:

Copy Code code as follows:

JavaScript functions:
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var halfamonth = day * 15;
var month = day * 30;
function Getdatediff (datetimestamp) {
var now = new Date (). GetTime ();
var diffvalue = Now-datetimestamp;
if (Diffvalue < 0) {
If the date does not match the pop-up window to tell
Alert ("End date cannot be less than start date!") ");
}
var monthc =diffvalue/month;
var weekc =diffvalue/(7*day);
var dayc =diffvalue/day;
var hourc =diffvalue/hour;
var MinC =diffvalue/minute;
if (monthc>=1) {
Result= "published in" + parseint (MONTHC) + "months ago";
}
else if (weekc>=1) {
Result= "published in" + parseint (WEEKC) + "weeks ago";
}
else if (dayc>=1) {
Result= "published in" + parseint (DAYC) + "days ago";
}
else if (hourc>=1) {
Result= "published in" + parseint (HOURC) + "an hour ago";
}
else if (minc>=1) {
Result= "published in" + parseint (MinC) + "Minutes ago";
}else
result= "just published";
return result;
}

If you get a time format that is not a timestamp, you can use the following JavaScript function to convert the string to a timestamp, which functions like the JS version of Strtotime:

Copy Code code as follows:

JS function Code: string conversion to Timestamp
function Getdatetimestamp (DATESTR) {
Return Date.parse (Datestr.replace (/-/gi, "/"));
}

Example 2:

Copy Code code as follows:

<script>
function Jsdatediff (publishtime) {
var d_minutes,d_hours,d_days;
var timenow = parseint (new Date (). GetTime ()/1000);
var D;
D = timenow-publishtime;
D_days = parseint (d/86400);
D_hours = parseint (d/3600);
D_minutes = parseint (D/60);
if (d_days>0 && d_days<4) {
return d_days+ "days ago";
}else if (d_days<=0 && d_hours>0) {
return d_hours+ "hours ago";
}else if (d_hours<=0 && d_minutes>0) {
return d_minutes+ "Minutes ago";
}else{
var s = new Date (publishtime*1000);
S.getfullyear () + "year";
Return (S.getmonth () +1) + "month" +s.getdate () + "Day";
}
}
</script>

Second, jquery plug-in implementation

HTML code:

Copy Code code as follows:

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

Calling code:

Copy Code code as follows:

JQuery ("Span.timeago"). Timeago ();

Plug-in Source:

Copy Code code 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: "Before",
Suffixfromnow: "From Now",
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 < && substitute ($l, math.round) | |
Days < && 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 and HTML5 in IE
return $ (elem). Get (0). tagname.tolowercase () = = "Time"; $ (Elem). Is (' time ');
}
});

Functions can be called via $ (EL). Timeago (' action ')
Init is default when no action given
Functions are 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). 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 this 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");
}));

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.