天天看点

****timeago.js插件:jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例前端 时间个性化 插件 jquery.timeago.js

关键词 :

时间格式化 刚刚 N分钟前 N小时前 N天前 N月前 N年前 

MM-dd hh:mm  或者  yyyy-MM-dd

前端: 

<code>&lt;</code><code>span</code> <code>class="time" title="2016-07-23 12:02:32"&gt;&lt;/</code><code>span</code><code>&gt;</code>

  

用法:

插件: jquery.timeago.js

****timeago.js插件:jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例前端 时间个性化 插件 jquery.timeago.js

jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例

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

jquery插件实现

HTML代码:

&lt;span class="time timeago" title="&lt;fmt:formatDate value="${comment.createAt}" pattern="yyyy-MM-dd HH:mm:ss"/&gt;"&gt;&lt;/span&gt;

调用代码:

jQuery("span.timeago").timeago();

插件源码:

(function (factory) {

  if (typeof define === 'function' &amp;&amp; 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: "1分钟",

        minutes: "%d分钟",

        hour: "1小时",

        hours: "%d小时",

        day: "1天",

        days: "%d天",

        month: "1月",

        months: "%d月",

        year: "1年",

        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 &lt; 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 &amp;&amp; $l.numbers[number]) || number;

        return string.replace(/%d/i, value);

      var words = seconds &lt; 45 &amp;&amp; substitute($l.seconds, Math.round(seconds)) ||

        seconds &lt; 90 &amp;&amp; substitute($l.minute, 1) ||

        minutes &lt; 45 &amp;&amp; substitute($l.minutes, Math.round(minutes)) ||

        minutes &lt; 90 &amp;&amp; substitute($l.hour, 1) ||

        hours &lt; 24 &amp;&amp; substitute($l.hours, Math.round(hours)) ||

        hours &lt; 42 &amp;&amp; substitute($l.day, 1) ||

        days &lt; 30 &amp;&amp; substitute($l.days, Math.round(days)) ||

        days &lt; 45 &amp;&amp; substitute($l.month, 1) ||

        days &lt; 365 &amp;&amp; substitute($l.months, Math.round(days / 30)) ||

        years &lt; 1.5 &amp;&amp; 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 -&gt; -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 &gt; 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") ) });

  $.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) &lt; $s.cutoff) {

        $(this).text(inWords(data.datetime));

  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 &gt; 0 &amp;&amp; !($t.isTime(element) &amp;&amp; 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");

}));如何联系我:【万里虎】www.bravetiger.cn

【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起)

【博客】http://www.cnblogs.com/kenshinobiy/

继续阅读