Heim > Web-Frontend > js-Tutorial > Teilen von Codebeispielen mit JS und JQuery zur Implementierung von Zeitunterschied-Anzeigeeffekten wie vor Minuten, vor Stunden und vor Tagen._Javascript-Kenntnisse

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

WBOY
Freigeben: 2016-05-16 16:52:48
Original
1366 Leute haben es durchsucht

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");
}));
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage