時間前：如何顯示出版日期作為時間以來的時間-IT業界-PHP中文網

時間前：如何顯示出版日期作為時間以來的時間

鑰匙要點

>顯示出發布日期以來發布的時間以來的時間，例如“ 2分鐘前出版”，可以增加與聽眾的新鮮感和互動感，而不是“ 2016年9月12日出版”。 >
元素可用於顯示這些動態日期，並提供[DateTime]屬性提供的後備值，以確保更好的可訪問性。 [title]屬性可用於顯示光標放置在日期文本上的確切日期。 JavaScript
>通常以2015年9月12日或09/12/2015，09：41:23和2015-09-12發布的格式在網絡上呈現日期。

> 這樣的日期格式似乎是完全合理的。畢竟，它們是有益的和可讀的！好吧，是的，但是“人類閱讀”並不是必需的，這意味著用戶很容易理解該活動的發生方式。網絡是一個快速移動的地方，讓您的內容具有新鮮感可能是與觀眾互動的關鍵！因此，讓我們看一下如何改進這些共同的日期格式。

一個小技巧

>再次，假設您已經偶然發現了幾分鐘前出版的帖子，但是帖子的副標題指出了：

於2016年9月12日發布

…或此：

>發表於2016-09-12，09：41:23

這些消息的問題在於，它們沒有傳達出您的網站剛剛更新或您經常這樣做的感覺。因此，肯定會更誘人，而且更清晰地以這種方式呈現時間：

2分鐘前出版

>

以前看過很多次嗎？但是，你們中有多少人將其建立在您的項目中？以Facebook為例：如果他們在我的第一個示例中呈現最新內容的日期，那會是什麼樣？在以下圖像中比較左右列：

左專欄的日期不那麼吸引人，是嗎？我敢打賭，右手示例對您更具吸引力。知道內容很新鮮非常重要 - 尤其是在社交網絡上，人們更有可能忽略舊時間或不清晰的時間戳。
>
>打印更好的日期

為了提供更好的日期，您需要一些服務器端腳本，我將使用PHP進行此演示。我創建了一個稱為time_ago（）的微小函數，如下所示：>
<?php

 define( TIMEBEFORE_NOW, 'now' );
 define( TIMEBEFORE_MINUTE, '{num} minute ago' );
 define( TIMEBEFORE_MINUTES, '{num} minutes ago' );
 define( TIMEBEFORE_HOUR, '{num} hour ago' );
 define( TIMEBEFORE_HOURS, '{num} hours ago' );
 define( TIMEBEFORE_YESTERDAY, 'yesterday' );
 define( TIMEBEFORE_FORMAT, '%e %b' );
 define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );

 function time_ago( $time )
 {
 $out = ''; // what we will print out
 $now = time(); // current time
 $diff = $now - $time; // difference between the current and the provided dates

 if( $diff < 60 ) // it happened now
 return TIMEBEFORE_NOW;

 elseif( $diff < 3600 ) // it happened X minutes ago
 return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );

 elseif( $diff < 3600 * 24 ) // it happened X hours ago
 return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );

 elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
 return TIMEBEFORE_YESTERDAY;

 else // falling back on a usual date format as it happened later than yesterday
 return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
 }

?>
登入後複製
登入後複製
讓我們看一下此代碼的一些細節。

您唯一必須提供的參數是$時間，它是Unix Timestamp中的日期 - 例如Time_ago（1442082961）。
>函數將返回的$ $時間的示例：

現在
- 如果發生在不到60秒之前（timebefore_now）> 3分鐘前 - 如果不到60分鐘前（timeborefore_minute（s））
>
8小時前 - 如果不到24小時前（timeborefore_hour（s））

昨天 - 如果不到48小時前（timeborefore_yesterday）
>
9月12日 - 如果超過48小時，並且發生在今年（timeborefore_format）
>
> 2015年9月12日 - 如果不是今年（timeborefore_format_year）。

> PHP定義用於將類似於配置的數據與功能代碼分開（最好將所有Define（）出現放入配置文件中，將功能放入helpers File中）。
> 定義中的
{num}用實際數字（分鐘或小時）代替。
我使用strftime（）而不是date（）來避免語言/語言問題。
>
例如

，或者是其他一些假設的CMS：

或靜態方式：
<?=time_ago( get_the_time( 'U' ) )?>
登入後複製
登入後複製
>可訪問性和可用性
<?=time_ago( $post->date_created )?>
登入後複製
登入後複製
>您應該使用一個特定的HTML元素來呈現日期：。在我們的情況下，使用time_ago函數時，時間元素的值並不總是以有效的日期格式（例如
昨天
<?=time_ago( 1447571705 )?>
登入後複製
或
> 3分鐘前
>）。因此，您還應該使用[DateTime]屬性：提供後備值
這將導致更好的可訪問性，例如： 您是否發現了[title]屬性？這是一個很小的可用性改進：將光標置於日期文本上顯示標題屬性中顯示的消息。這是針對由於某種原因尋找“真實”日期的用戶。這是CSS的小技巧，可以增強更多的感覺：
>
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>
登入後複製

Published <time datetime="2015-09-12" title="September 12">3 minutes ago</time>
登入後複製

> JavaScript增強

>我們還有一件事！您是否注意到Facebook還實時增加了日期？只需在3分鐘內觀看一分鐘，它將變成4分鐘，依此類推。因此，有類型的網站是一個非常不錯的增強。在這樣的文章中，它不會有用，但是在像ReadErrr這樣的網站上是完美的：
>
<?php define( TIMEBEFORE_NOW, 'now' ); define( TIMEBEFORE_MINUTE, '{num} minute ago' ); define( TIMEBEFORE_MINUTES, '{num} minutes ago' ); define( TIMEBEFORE_HOUR, '{num} hour ago' ); define( TIMEBEFORE_HOURS, '{num} hours ago' ); define( TIMEBEFORE_YESTERDAY, 'yesterday' ); define( TIMEBEFORE_FORMAT, '%e %b' ); define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' ); function time_ago( $time ) { $out = ''; // what we will print out $now = time(); // current time $diff = $now - $time; // difference between the current and the provided dates if( $diff < 60 ) // it happened now return TIMEBEFORE_NOW; elseif( $diff < 3600 ) // it happened X minutes ago return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES ); elseif( $diff < 3600 * 24 ) // it happened X hours ago return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS ); elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday return TIMEBEFORE_YESTERDAY; else // falling back on a usual date format as it happened later than yesterday return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time ); } ?>
登入後複製
登入後複製
最後，我們需要將PHP代碼轉換為JavaScript等效。我在Vanilla JS中為您完成了此操作（儘管也可以使用jQuery版本）。該腳本每分鐘每分鐘一次瀏覽一次[數據時]元素（settimeout（更新，1000 * 60）），並更新值：
>

<?=time_ago( get_the_time( 'U' ) )?>
登入後複製
登入後複製

在線演示和代碼下載

>您可以查看上述代碼的在線演示或下載完整的演示代碼。
>另外一件事

在上面的示例中，如果活動發生在三天前或更多天之前，則會提供全日期。但是，像5天前，2週前和1個月前一樣，擴展腳本以呈現時間很容易：
>

總結
<?=time_ago( $post->date_created )?>
登入後複製
登入後複製

用戶體驗和滿意度已詳細介紹。有時，一個簡單的細節（例如動態日期格式）足以使我們的網站變得更好。
>那麼，您如何看待這個解決方案？您會考慮在下一個項目上使用它嗎？您對此有任何疑問嗎？請在評論中讓我知道。
順便說一句，我希望有人能告訴Instagram人122W並不酷，而2.4歲將容易理解。那會更好，不是嗎？
經常提出問題（常見問題解答），以計算“ ago”時間

>“ AGO”時間函數在JavaScript中如何起作用？它使用日期對象來計算當前時間和事件時間之間的差異。然後，根據差異的大小，將此差異轉換為秒，幾分鐘，小時，幾天，幾週或幾年。結果是一個字符串，該字符串以人為可讀的格式表示經過的時間，例如“ 5分鐘前”或“ 2天前”。應用程式?
要在您的Web應用程序中實現'AGO'時間函數，您需要創建一個以日期對象為輸入的JavaScript函數，並返回代表經過的時間的字符串。此功能應計算當前時間和輸入日期之間的差異，將此差異轉換為適當的單元，並將結果格式化為字符串。然後，您可以在需要顯示“ AGO”時間時調用此功能。
>
使用“ AGO”時間函數有什麼好處？ “ AGO”時間函數並沒有顯示可能難以解釋和比較的事件的確切日期和時間，而是以易於理解和與之相關的格式顯示了經過的時間。這可以增強用戶體驗，並使您的Web應用程序更具吸引力和交互性。

>'ogo'時間函數可以處理未來日期嗎？

是的，'ogo'''時間函數可以處理未來日期。如果輸入日期比當前日期晚，則該功能將計算時間到事件的時間，而不是事件以來的時間。結果將是一個字符串，該字符串表示剩餘時間以人為可讀的格式，例如“在5分鐘內”或“ 2天內”。
>
>我如何自定義“ AGO”時間函數以適合我的需求？
“ AGO”時間函數是高度自定義的。您可以修改功能以使用不同的時間單位，輸出字符串的不同格式或用於整理經過時間的不同規則。如果需要，您還可以添加對不同語言或語言的支持。通過調整函數，您可以使其與Web應用程序的設計和功能完美匹配。
>'ogo'時間函數與所有瀏覽器兼容？功能基於標準的JavaScript功能，因此應與所有現代Web瀏覽器兼容。但是，在不同的瀏覽器和平台上測試您的代碼總是一個好主意，以確保其正常工作正常。 “ AGO”時間功能可以處理時區。該功能使用日期對象，該對象會自動考慮用戶設備的時區。這意味著，無論用戶的位置或時區域如何，“ AGO”時間都將是準確的。
>
>如果它不正常工作，我該如何調試'ogo'時間？

如果“ AGO”時間函數無法正常工作，您可以使用Console.log（）方法打印輸入日期，當前日期和計算的差異。這將幫助您確定功能中的任何錯誤或不一致之處。您還可以在瀏覽器的開發人員工具中使用調試器工具來逐步介紹該功能並詳細檢查其行為。

>我可以在移動應用程序中使用'AGO'時間函數？是的，您可以在移動應用程序中使用“ AGO”時間函數。 JavaScript是一種多功能語言，可以在包括移動應用在內的許多不同環境中使用。該功能應在移動應用程序中與Web應用程序中的功能相同。
>
>如何優化“ AGO”時間函數的性能？

以優化“ AGO”時間函數的性能，您可以使用諸如Memoization或Caching之類的技術。這些技術可以減少功能執行的計算數量，從而使其更快，更有效。您還可以通過僅在必要時更新“ AGO”時間而不是在每個頁面加載或每一秒鐘。

以上是時間前：如何顯示出版日期作為時間以來的時間的詳細內容。更多資訊請關注PHP中文網其他相關文章！