Teilen von Codebeispielen mit JS und JQuery zur Implementierung von Zeitunterschied-Anzeigeeffekten wie vor Minuten, vor Stunden und vor Tagen._Javascript-Kenntnisse

Um ähnliche Funktionen zu erreichen, können Sie JS verwenden. Die Implementierungsmethode ist wie folgt:

1. JavaScript-Funktionsimplementierung:
Beispiel 1:

Code kopieren Der Code lautet wie folgt:

//JavaScript-Funktion:
var Minute = 1000 * 60;
var Stunde = Minute * 60;
var Tag = Stunde * 24;
var halfamonth = Tag * 15 ;
var Monat = Tag * 30;
Funktion getDateDiff(dateTimeStamp){
var now = new Date().getTime();
var diffValue = now - dateTimeStamp;
if( diffValue < 0){
//Wenn die Daten nicht übereinstimmen, werden Sie in einem Popup-Fenster benachrichtigt
//alert("Das Enddatum darf nicht kleiner als das Startdatum sein!");
}
var MonatC =DiffWert/Monat;
Var WocheC =DiffWert/(7*Tag);
Var TagC =DiffWert/Tag;
Var StundeC =DiffWert/Stunde;
Var minC =diffValue/minute;
if(monthC>= 1){
result="Veröffentlicht in" parseInt(monthC) "vor Monaten";
}
else if(weekC>=1) {
result="Veröffentlicht in" parseInt(weekC ) "vor einer Woche";
}
else if(dayC>=1){
result="Veröffentlicht in" parseInt(dayC) "Tag ago";
}
else if(hourC>=1){
result="Gepostet am" parseInt(hourC) "vor Stunden";
}
else if(minC>= 1){
result="Gepostet am" parseInt(minC) "vor Minuten";
}else
result="Gerade veröffentlicht";
Rückgabeergebnis;
}

Wenn das Zeitformat, das Sie erhalten, kein Zeitstempel ist, können Sie die folgende JavaScript-Funktion verwenden, um die Zeichenfolge in einen Zeitstempel umzuwandeln. Die Funktion dieser Funktion entspricht der JS-Version von strtotime:

Code kopieren Der Code lautet wie folgt:

//js-Funktionscode: Zeichenfolge in Zeitstempel konvertieren
Funktion getDateTimeStamp( dateStr){
return Date.parse(dateStr.replace(/-/gi,"/"));
}

Beispiel 2:

Code kopieren Der Code lautet wie folgt:

function jsDateDiff(publishTime){                                                                                                                                                  days>0 && d_days<4 ){  else if( d_hours<=0 && d_minutes>0){ s.getFullYear() "Year";
return (s.getMonth() 1) "month" s.getDate() "day"; >}




2. JQuery-Plug-In-Implementierung

HTML-Code:




Code kopieren


Der Code lautet wie folgt:


">

Code aufrufen:

Code kopieren

Der Code lautet wie folgt: jQuery(" span.timeago ").timeago();

Plug-in-Quellcode:

Code kopieren Der Code lautet wie folgt:

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Als anonymes Modul registrieren.
    define([ 'jquery'], Factory);
  } else {
    // Browser globals
    Factory(jQuery);
  }
}(function ($) {
  $.timeago = function(timestamp) {
    if (timestamp exampleof 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, {
    Einstellungen: { prefixFromNow: null,
   &  🎜 >        Stunde: "1小时",
        Stunden: "%d小时",
        Tag: "1天",
        Tage: "%d天",
        Monat: "1月",
        Monate: "%d月",
        Jahr: "1年",
        Jahre: "%d年",
        Worttrennzeichen: ",
        Zahlen: []
}
    },
    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) / 10 00;
      var Minuten = Sekunden / 60;
      var Stunden = Minuten / 60;
      var Tage = Stunden / 24;
      var Jahre = Tage / 365;

      function replacement(stringOrFunction, Zahl) {
        var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
        var value = ($l.numbers && $l.numbers[number]) || number;
        return string.replace(/%d/i, value);
      }

      var Words = Sekunden < 45 && replacement($l.seconds, Math.round(seconds)) ||
        seconds < 90 && replacement($l.minute, 1) ||
        Minuten < 45 && replacement($l.minutes, Math.round(minutes)) ||
        Minuten < 90 && replacement($l.hour, 1) ||
        Stunden < 24 && replacement($l.hours, Math.round(hours)) ||
        Stunden < 42 && replacement($l.day, 1) ||
        Tage < 30 && replacement($l.days, Math.round(days)) ||
        Tage < 45 && replacement($l.month, 1) ||
        Tage < 365 && replacement($l.months, Math.round(days / 30)) ||
        Jahre < 1.5 && replacement($l.year, 1) ||
        replacement($l.years, Math.round(years));

      var separator = $l.wordSeparator || "";
      if ($l.wordSeparator === undefiniert) { Separator = " "; },
   ;
      s = s.replace(/.d /,""); // Millisekunden entfernen
      s = s.replace(/-/,"/").replace(/-/,"/");
      s = s.replace(/T/," "). replace(/Z/," UTC");
      s = s.replace(/([ -]dd):?(dd)/," $1$2"); // -04:00 -> -0400
      neues Datum(e) zurückgeben;
    },
    datetime: function(elem) {
      var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
      return $t.parse(iso8601);
    },
    isTime: function(elem) {
      // jQuerys `is()` funktioniert nicht gut mit HTML5 im IE
      return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");
    }
  });

  // ​​Funktionen, die über $(el).timeago('action')      Refresh_el(); freshMillis);
      }
    },
    update: function(time){
      $(this).data('timeago', { datetime: $t.parse(time) });
     fresh.apply(this);
    },
    updateFromDOM: function(){
      $(this).data('timeago', { datetime: $t.parse( $t.isTime( Dies) ? 🎜>
  $.fn.timeago = function(action, options) {
    var fn = action ? Functions[Action] : Functions.init;
    if(!fn){
      throw new Error("Unknown function name '" action "' for timeago");
    }
    // every over Objekte hier und rufen Sie die angeforderte Funktion auf
    this.each(function(){
      fn.call(this, options);
    });
    return this;
  };
>      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());
}

  // ​​Fehlerbehebung für IE6-Fehler
  document.createElement("abbr");
  document.createElement("time");
}));