Heim > Web-Frontend > js-Tutorial > Wie implementiert man die Zeitanzeigeformatierung von Stack Exchange in JavaScript?

Wie implementiert man die Zeitanzeigeformatierung von Stack Exchange in JavaScript?

Patricia Arquette
Freigeben: 2024-11-08 09:03:02
Original
332 Leute haben es durchsucht

How to Implement Stack Exchange's Time Display Formatting in JavaScript?

Formatieren der Zeit seit: Replizieren der Zeitanzeige von Stack Exchange

Die Notwendigkeit, die seit einem bestimmten Zeitpunkt verstrichene Zeit anzuzeigen, ist in Webanwendungen alltäglich . Viele beliebte Websites wie Stack Exchange verwenden ein prägnantes und informatives Format zur Anzeige der Zeit seither, etwa „vor 4 Minuten“ oder „vor 1 Jahr“. Durch die Implementierung einer ähnlichen Formatierungsmethode in JavaScript können Entwickler eine benutzerfreundliche und intuitive Möglichkeit bieten, auf vergangene Ereignisse zu verweisen.

Um dies zu erreichen, können wir das in JavaScript integrierte Date-Objekt und eine einfache Berechnung nutzen, um die verstrichenen Ereignisse zu ermitteln Zeit zwischen zwei Daten.

Implementierung:

function timeSince(date) {
  var seconds = Math.floor((new Date() - date) / 1000);

  var interval = seconds / 31536000;

  if (interval > 1) {
    return Math.floor(interval) + " years";
  }
  interval = seconds / 2592000;
  if (interval > 1) {
    return Math.floor(interval) + " months";
  }
  interval = seconds / 86400;
  if (interval > 1) {
    return Math.floor(interval) + " days";
  }
  interval = seconds / 3600;
  if (interval > 1) {
    return Math.floor(interval) + " hours";
  }
  interval = seconds / 60;
  if (interval > 1) {
    return Math.floor(interval) + " minutes";
  }
  return Math.floor(seconds) + " seconds";
}
Nach dem Login kopieren

Verwendung:

var aDay = 24 * 60 * 60 * 1000;
console.log(timeSince(new Date(Date.now() - aDay))); // "1 day ago"
console.log(timeSince(new Date(Date.now() - aDay * 2))); // "2 days ago"
Nach dem Login kopieren

Diese Funktion berechnet die Differenz zwischen der aktuellen Uhrzeit und einem bestimmten Datum und formatiert es dann als Zeichenfolge basierend auf der verstrichenen Zeit, die von Sekunden bis zu Jahren reicht. Die Funktion teilt die verstrichene Zeit durch verschiedene Intervalle und rundet das Ergebnis auf die nächste ganze Zahl.

Durch die Implementierung dieser Methode können Entwickler die verstrichene Zeit einfach in einem konsistenten und benutzerfreundlichen Format anzeigen und so das Benutzererlebnis verbessern ihrer Webanwendungen.

Das obige ist der detaillierte Inhalt vonWie implementiert man die Zeitanzeigeformatierung von Stack Exchange in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage