Vorzeit: So zeigen Sie Veröffentlichungstermine als Zeit, die seitdem veröffentlicht werden

Key Takeaways

• Veröffentlichungstermine als Zeit, die seit dem veröffentlichten veröffentlichten „vor 2 Minuten veröffentlicht“ veröffentlichen, kann das Gefühl der Frische und des Engagements mit Ihrem Publikum erhöhen, im Gegensatz zu traditionellen Datumsformaten wie „veröffentlicht am 12. September 2016“.
• Eine PHP-Funktion namens time_ago () kann verwendet werden, um Unix-Zeitstempel in ein menschlich lesbares Format wie "jetzt", "vor 3 Minuten", "vor 8 Stunden", "gestern" oder bestimmte Daten zu konvertieren, wenn die Aktivität trat vor mehr als zwei Tagen auf.
• Das HTML -Element kann zur Präsentation dieser dynamischen Daten verwendet werden, wobei ein Fallback -Wert vom Attribut [DateTime] bereitgestellt wird, um eine bessere Zugänglichkeit zu gewährleisten. Das [Titel] Attribut kann verwendet werden, um das genaue Datum anzuzeigen, an dem der Cursor über den Datumstext platziert wird.
JavaScript kann verwendet werden, um die Daten in Echtzeit zu erhöhen, ähnlich wie Facebook. Dies kann eine schöne Verbesserung für bestimmte Arten von Websites sein, auf denen Echtzeit-Updates wichtig sind.

Es ist üblich, Daten im Web in einem Format wie dem 12. September 2015 oder dem 12.09.2015, 09:41:23 Uhr und 2015-09-12 zu präsentieren.

Jedes dieser Beispiele gibt das vollständige Datum und/oder die Uhrzeit einer Aktivität an - sei es ein veröffentlichter Artikel oder ein Leser -Kommentar oder vielleicht ein hochgeladenes Video.

Date -Formate wie diese mögen vollkommen vernünftig erscheinen. Immerhin sind sie informativ und menschlich lesbar! Ja, aber "menschlich lesbar" bedeutet nicht, dass Benutzer ohne weiteres verstehen können, wie kürzlich die Aktivität aufgetreten ist. Das Web ist ein sich schnell bewegender Ort, und es könnte der Schlüssel für die Zusammenarbeit mit Ihrem Publikum sein! Schauen wir uns also an, wie wir diese gemeinsamen Datumsformate verbessern können.

Ein kleiner Trick

Noch einmal, sagen wir, Sie sind auf einen Beitrag gestolpert, der erst vor ein paar Minuten veröffentlicht wurde, aber die Unterstellung des Beitrags besagt dies:

veröffentlicht am 12. September 2016

… oder das:

veröffentlicht am 2016-09-12, 09:41:23

Das Problem mit diesen Nachrichten ist, dass sie nicht das Gefühl mitteilen, dass Ihre Website gerade aktualisiert wurde oder dass Sie das sehr oft tun. Es ist also sicherlich einladender und viel klarer, die Zeit auf diese Weise zu präsentieren:

vor 2 Minuten veröffentlicht

schon oft gesehen? Aber wie viele von Ihnen haben dies in Ihre Projekte aufgebaut? Nehmen Sie Facebook zum Beispiel: Wie würde es aussehen, wenn sie die Daten für den neuesten Inhalt wie in meinem ersten Beispiel präsentieren würden? Vergleichen Sie die linken und rechten Spalten im folgenden Bild:

Die Daten der linken Spalte sind nicht so attraktiv, oder? Ich werde die rechten Beispiele einsetzen, die Ihnen ansprechender sind. Zu wissen, dass der Inhalt frisch ist, ist sehr wichtig - insbesondere in den sozialen Netzwerken, in denen Menschen in den alten oder nicht eindeutigen Zeitstempel ignorieren.

.

Drucken bessere Daten

Um bessere Daten

zu präsentieren, benötigen Sie ein serverseitiges Skript, und ich werde PHP für diese Demo verwenden. Ich habe eine winzige Funktion namens time_ago () erstellt, wie hier gezeigt:

<span><span><?php
</span></span><span>
</span><span>    <span>define( TIMEBEFORE_NOW,         'now' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTE,      '{num} minute ago' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTES,     '{num} minutes ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOUR,        '{num} hour ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOURS,       '{num} hours ago' );
</span></span><span>    <span>define( TIMEBEFORE_YESTERDAY,   'yesterday' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT,      '%e %b' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );
</span></span><span>
</span><span>    <span>function time_ago( $time )
</span></span><span>    <span>{
</span></span><span>        <span>$out    = ''; // what we will print out
</span></span><span>        <span>$now    = time(); // current time
</span></span><span>        <span>$diff   = $now - $time; // difference between the current and the provided dates
</span></span><span>
</span><span>        <span>if( $diff < 60 ) // it happened now
</span></span><span>            <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 ) // it happened X minutes ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 ) // it happened X hours ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
</span></span><span>            <span>return TIMEBEFORE_YESTERDAY;
</span></span><span>
</span><span>        <span>else // falling back on a usual date format as it happened later than yesterday
</span></span><span>            <span>return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
</span></span><span>    <span>}
</span></span><span>
</span><span><span>?></span></span>

schauen wir uns einige Details dieses Code an.

Das einzige Argument, das Sie vorlegen müssen, ist $ Time und es ist ein Datum in Unix Timestamp - wie Time_ago (1442082961).
• Beispiele dafür, wie die Funktion in Bezug auf die verabschiedete Zeit $ zurückkehrt:
  • jetzt
  - wenn es vor weniger als 60 Sekunden vorgekommen ist (TimeBefore_Now)
  vor 3 Minuten - wenn vor weniger als 60 Minuten (TimeBefore_Minute (s))
  vor 8 Stunden - wenn vor weniger als 24 Stunden (timebefore_hour (s))
  gestern - wenn vor weniger als 48 Stunden (timeBefore_yesterday)
  12 Sep - Wenn mehr als 48 Stunden und in diesem Jahr (TimeBefore_Format)
  • stattgefunden haben
  12. September 2015 - Wenn nicht in diesem Jahr passiert ist (TIMEBEFORE_FORMAT_YEAR).
Die PHP-Definitionen dienen zum Trennen der konfigurierten Daten aus dem Funktionscode (es wäre eine gute Praxis, alle Definiten () -vorkommnisse in eine Konfigurationsdatei und die Funktion in der Helpers-Datei einzulegen).
{num} In Definitionen werden durch tatsächliche Zahlen (Minuten oder Stunden) ersetzt.
Ich benutze Strftime () anstelle von Datum (), um Sprach-/Gebietsschema -Probleme zu vermeiden.

Zum Beispiel, wenn Sie dies auf Ihre WordPress -Site bringen möchten, schreiben Sie einfach Folgendes:

<span><span><?=time_ago( get_the_time( 'U' ) )?></span></span>

oder wenn es sich um ein anderes hypothetisches CMS handelte:

<?=time_ago( $post->date_created )?>

oder der statische Weg:

<?=time_ago( 1447571705 )?>

Barrierefreiheit & Usability

Es gibt ein spezifisches HTML -Element, das Sie zum Präsentieren von Daten verwenden sollten: . In unserem Fall befindet sich bei Verwendung der Funktion Time_ago der Wert des Zeitelements nicht immer in einem gültigen Datumsformat (wie gestern oder vor 3 Minuten

). Daher sollten Sie auch einen Fallback -Wert angeben, indem Sie ein [DateTime] -attribut verwenden:

Published <time 
    datetime="<?=date( 'Y-m-d', $time )?>" 
    title="<?=strftime( date( 'Y', $time ) == 
        date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time )?>">
    <?=time_ago( $time )?>
    </time>

Dies würde zu einer besseren Zugänglichkeit führen, zum Beispiel:

Published <time datetime="2015-09-12" title="September 12">3 minutes ago</time>

Hast du das [Titel] Attribut entdeckt? Es ist eine winzige Verbesserung der Benutzerfreundlichkeit: Wenn Sie den Cursor über den Datum einsetzen, zeigt eine Meldung im Titelattribut angezeigt. Das gilt für die Benutzer, die aus irgendeinem Grund nach den "echten" Daten suchten. Hier ist ein kleiner CSS -Trick, um das Gefühl zu verbessern, dass es etwas mehr gibt:

<span>time<span><span>[title]</span></span>
</span><span>{
</span>    <span>cursor: help;
</span><span>}</span>

JavaScript -Verbesserung

Es gibt noch eine Sache, die wir tun können! Haben Sie bemerkt, dass Facebook auch die Daten in Echtzeit erhöht? Beobachten Sie einfach 3 Minuten für eine Minute und es wird 4 Minuten und so weiter. Es gibt also Arten von Websites, die dies als eine wirklich schöne Verbesserung gilt. Es wäre nicht nützlich in einem Artikelbeitrag wie diesem, aber es ist perfekt auf einer Website wie Readerrr:

perfekt

<span><span><?php
</span></span><span>
</span><span>    <span>define( TIMEBEFORE_NOW,         'now' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTE,      '{num} minute ago' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTES,     '{num} minutes ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOUR,        '{num} hour ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOURS,       '{num} hours ago' );
</span></span><span>    <span>define( TIMEBEFORE_YESTERDAY,   'yesterday' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT,      '%e %b' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );
</span></span><span>
</span><span>    <span>function time_ago( $time )
</span></span><span>    <span>{
</span></span><span>        <span>$out    = ''; // what we will print out
</span></span><span>        <span>$now    = time(); // current time
</span></span><span>        <span>$diff   = $now - $time; // difference between the current and the provided dates
</span></span><span>
</span><span>        <span>if( $diff < 60 ) // it happened now
</span></span><span>            <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 ) // it happened X minutes ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 ) // it happened X hours ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
</span></span><span>            <span>return TIMEBEFORE_YESTERDAY;
</span></span><span>
</span><span>        <span>else // falling back on a usual date format as it happened later than yesterday
</span></span><span>            <span>return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
</span></span><span>    <span>}
</span></span><span>
</span><span><span>?></span></span>

Schließlich müssen wir den PHP -Code in ein JavaScript -Äquivalent konvertieren. Ich habe dies für Sie in Vanilla JS getan (obwohl auch eine Jquery -Version verfügbar ist). Das Skript geht jedes Mal durch jede Minute durch (setTimeout (aktualisiert, 1000 * 60)) und aktualisiert die Werte:

<span><span><?=time_ago( get_the_time( 'U' ) )?></span></span>

Online -Demo und Code Download

Sie können sich eine Online -Demo des obigen Code ansehen oder den vollständigen Demo -Code herunterladen.

Eine weitere Sache

In den obigen Beispielen wird das volle Datum vorgestellt, wenn die Aktivität vor drei oder mehr Tagen aufgetreten ist. Aber es ist ziemlich einfach, das Skript zu verlängern, um die Zeit in den Wegen wie vor 5 Tagen, vor 2 Wochen und vor 1 Monat und so weiter zu präsentieren:

<?=time_ago( $post->date_created )?>

up

Benutzererfahrung und Zufriedenheit sind im Detail. Manchmal reicht ein einfaches Detail - wie ein dynamisches Datumsformat - aus, um unsere Websites ein bisschen besser zu machen.

Was halten Sie von dieser Lösung? Würden Sie in Betracht ziehen, es für Ihr nächstes Projekt zu verwenden? Haben Sie Fragen dazu? Bitte lassen Sie es mich in den Kommentaren wissen.

Ich hoffe, jemand kann Instagram -Leute sagen, dass 122W nicht cool ist und dass 2,4 Jahre viel einfacher zu verstehen sind. Das wäre besser, nicht wahr?

häufig gestellte Fragen (FAQs) zum Zählen der "Aroigen" -Time

Wie funktioniert die Zeitfunktion der Zeit in JavaScript? Es verwendet das Datumsobjekt, um die Differenz zwischen der aktuellen Zeit und der Zeit des Ereignisses zu berechnen. Dieser Unterschied wird dann in Sekunden, Minuten, Stunden, Tage, Wochen oder Jahre umgewandelt, abhängig von der Größe des Unterschieds. Das Ergebnis ist eine Zeichenfolge, die die verstrichene Zeit in einem menschlich lesbaren Format darstellt, wie "vor 5 Minuten" oder "vor 2 Tagen". Anwendung? Diese Funktion sollte die Differenz zwischen der aktuellen Zeit und dem Eingabedatum berechnen, diese Differenz in die entsprechenden Einheiten umwandeln und das Ergebnis als Zeichenfolge formatieren. Sie können diese Funktion dann aufrufen, wenn Sie die Zeit "AGE" anzeigen müssen.

Welche Vorteile haben die Nutzung der Zeitfunktion „AGO“? Anstatt das genaue Datum und die genaue Uhrzeit eines Ereignisses anzuzeigen, das schwer zu interpretieren und zu vergleichen ist, zeigt die Zeitfunktion „AGO“ die verstrichene Zeit in einem Format, mit dem leicht zu verstehen und bezieht. Dies kann die Benutzererfahrung verbessern und Ihre Webanwendung ansprechender und interaktiver machen. Daten. Wenn das Eingabedatum später als das aktuelle Datum ist, berechnet die Funktion die Zeit bis zum Ereignis anstelle der Zeit seit dem Ereignis. Das Ergebnis wird eine Zeichenfolge sein, die die verbleibende Zeit in einem menschlich lesbaren Format darstellt, wie z. B. „in 5 Minuten“ oder „in 2 Tagen“. Meine Bedürfnisse? Sie können die Funktion so ändern, dass sie unterschiedliche Zeiteinheiten, unterschiedliche Formate für die Ausgangszeichenfolge oder verschiedene Regeln für die Runden der verstrichenen Zeit verwenden. Bei Bedarf können Sie auch verschiedene Sprachen oder Orte unterstützen. Wenn Sie die Funktion optimieren, können Sie sie perfekt zum Design und der Funktionalität Ihrer Webanwendung passen. Die Funktion basiert auf Standard -JavaScript -Funktionen und sollte daher mit allen modernen Webbrowsern kompatibel sein. Es ist jedoch immer eine gute Idee, Ihren Code auf verschiedenen Browsern und Plattformen zu testen, um sicherzustellen, dass er korrekt und konsequent funktioniert. Die Zeitfunktion "Aroy" kann Zeitzonen bewältigen. Die Funktion verwendet das Datumsobjekt, das automatisch die Zeitzone des Benutzergeräts berücksichtigt. Dies bedeutet, dass die Zeit "vor", unabhängig vom Standort oder der Zeitzone des Benutzers. Die Zeitfunktion von 'Aroy' funktioniert nicht korrekt. Sie können die Methode console.log () verwenden, um das Eingabedatum, das aktuelle Datum und die berechnete Differenz auszudrucken. Auf diese Weise können Sie Fehler oder Inkonsistenzen in der Funktion identifizieren. Sie können das Debugger -Tool auch in den Entwickler -Tools Ihres Browsers verwenden, um die Funktion durchzusetzen und sein Verhalten im Detail zu überprüfen. Ja, Sie können die Zeitfunktion "AGO" in einer mobilen App verwenden. JavaScript ist eine vielseitige Sprache, die in vielen verschiedenen Umgebungen, einschließlich mobiler Apps, verwendet werden kann. Die Funktion sollte in einer mobilen App genauso funktionieren wie in einer Webanwendung.

Wie kann ich die Leistung der Zeitfunktion „AGO“ optimieren? Diese Techniken können die Anzahl der Berechnungen verringern, die die Funktion ausführen muss, wodurch sie schneller und effizienter wird. Sie können auch die Häufigkeit, mit der die Funktion aufgerufen wird

Das obige ist der detaillierte Inhalt vonVorzeit: So zeigen Sie Veröffentlichungstermine als Zeit, die seitdem veröffentlicht werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!