JS and jquery code instances that implement time difference display several minutes ago, several hours ago, and a few days ago

On the Sina Weibo homepage, you can see that the time displayed after each microblog is not in the standard year-month-day format, but the time difference after conversion, for example: posted 5 minutes ago and 2 hours ago, it looks more intuitive and user-friendly than the standard time display format.

To implement similar functions, use JS as follows:

 

I. javascript function implementation:

Instance 1:

 

The Code is 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 window is displayed.

// Alert ("the end date cannot be earlier than the 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 = "posted on" + parseInt (monthC) + "Months Ago ";

}

Else if (weekC> = 1 ){

Result = "posted on" + parseInt (weekC) + "weeks ago ";

}

Else if (dayC> = 1 ){

Result = "posted on" + parseInt (dayC) + "Days Ago ";

}

Else if (hourC> = 1 ){

Result = "posted on" + parseInt (hourC) + "Hours Ago ";

}

Else if (minC> = 1 ){

Result = "posted on" + parseInt (minC) + "Minutes Ago ";

} Else

Result = "just published ";

Return result;

}

 

 

If the time format you get is not a timestamp, you can use the following JavaScript function to convert the string to a timestamp. The function of this function is equivalent to the strtotime of the js version:

 

The Code is as follows:

// Js function code: converts a string to a timestamp

Function getDateTimeStamp (dateStr ){

Return Date. parse (dateStr. replace (/-/gi ,"/"));

}

 

 

Instance 2:

 

The Code is 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 (DS/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>

 

 

Ii. jquery plug-in implementation

 

HTML code:

 

The Code is as follows:

<Span class = "time timeago" title = "<fmt: formatDate value =" $ {comment. createAt} "pattern =" yyyy-MM-dd HH: mm: ss "/>"> </span>

 

 

Call code:

 

 

The Code is as follows:

JQuery ("span. timeago"). timeago ();

 

 

Plug-in source code:

 

 

The 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: "",

SuffixFromNow: "from now ",

Seconds: "1 minute ",

Minute: "1 minute ",

Minutes: "% d minutes ",

Hour: "1 hour ",

Hours: "% d Hour ",

Day: "1 day ",

Days: "% d days ",

Month: "January ",

Months: "% d month ",

Year: "1 year ",

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 secondds = 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)/, "$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 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 ");

}));