搜尋
首頁科技週邊IT業界時間前:如何顯示出版日期作為時間以來的時間

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

鑰匙要點

  • >顯示出發布日期以來發布的時間以來的時間,例如“ 2分鐘前出版”,可以增加與聽眾的新鮮感和互動感,而不是“ 2016年9月12日出版”。 >
  • >一個稱為time_ago()的PHP函數可用於將UNIX時間戳轉換為人類可讀格式,例如“現在”,“ 3分鐘前”,“ 8小時前”,“昨天”或特定日期活動發生在兩天前。
  • > HTML
  • 元素可用於顯示這些動態日期,並提供[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()的微小函數,如下所示:>

<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 </span><span>            <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span>        <span>elseif( $diff </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 </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 </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></span></span></span></span></span>
讓我們看一下此代碼的一些細節。

    您唯一必須提供的參數是$時間,它是Unix Timestamp中的日期 - 例如Time_ago(1442082961)。
  • >函數將返回的$ $時間的示例:
    • 現在
    • - 如果發生在不到60秒之前(timebefore_now)> 3分鐘前 - 如果不到60分鐘前(timeborefore_minute(s))
    • >
    • 8小時前 - 如果不到24小時前(timeborefore_hour(s))
    • 昨天 - 如果不到48小時前(timeborefore_yesterday)
    • >
    • 9月12日 - 如果超過48小時,並且發生在今年(ti​​meborefore_format)
    • >
    • > 2015年9月12日 - 如果不是今年(ti​​meborefore_format_year)。
    > PHP定義用於將類似於配置的數據與功能代碼分開(最好將所有Define()出現放入配置​​文件中,將功能放入helpers File中)。
  • > 定義中的
  • {num}用實際數字(分鐘或小時)代替。
  • 我使用strftime()而不是date()來避免語言/語言問題。
  • >
  • 例如
  • ,或者是其他一些假設的CMS:

或靜態方式:
<span><span>=time_ago( get_the_time( 'U' ) )?></span></span>

>可訪問性和可用性
=time_ago( $post->date_created )?>

>您應該使用一個特定的HTML元素來呈現日期:

昨天
=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這樣的網站上是完美的:

>
<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 </span><span>            <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span>        <span>elseif( $diff </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 </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 </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></span></span></span></span></span>
最後,我們需要將PHP代碼轉換為JavaScript等效。我在Vanilla JS中為您完成了此操作(儘管也可以使用jQuery版本)。該腳本每分鐘每分鐘一次瀏覽一次[數據時]元素(settimeout(更新,1000 * 60)),並更新值:

>

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

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

在線演示和代碼下載

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

>另外一件事

在上面的示例中,如果活動發生在三天前或更多天之前,則會提供全日期。但是,像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中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
安卓首家接入DeepSeek背後:看見女性力量安卓首家接入DeepSeek背後:看見女性力量Mar 12, 2025 pm 12:27 PM

中国女性科技力量在AI领域的崛起:荣耀与DeepSeek合作背后的女性故事女性在科技领域的贡献日益显著。中国科技部数据显示,女性科技工作者数量庞大,在AI算法开发中展现出独特的社会价值敏感性。本文将聚焦荣耀手机,探究其率先接入DeepSeek大模型背后的女性团队力量,展现她们如何推动科技进步,重塑科技发展价值坐标系。2024年2月8日,荣耀正式上线DeepSeek-R1满血版大模型,成为安卓阵营首家接入DeepSeek的厂商,引发用户热烈反响。这一成功背后,女性团队成员在产品决策、技术攻坚和用户

DeepSeek'驚人”盈利:理論利潤率高達545%!DeepSeek'驚人”盈利:理論利潤率高達545%!Mar 12, 2025 pm 12:21 PM

DeepSeek公司在知乎發布技術文章,詳細介紹了其DeepSeek-V3/R1推理系統,並首次公開關鍵財務數據,引發業界關注。文章顯示,該系統單日成本利潤率高達545%,創下全球AI大模型盈利新高。 DeepSeek的低成本策略使其在市場競爭中佔據優勢。其模型訓練成本僅為同類產品的1%-5%,V3模型訓練成本僅為557.6萬美元,遠低於競爭對手。同時,R1的API定價僅為OpenAIo3-mini的1/7至1/2。這些數據證明了DeepSeek技術路線的商業可行性,也為AI大模型的高效盈利樹立了

2025年最佳10個最佳免費反向鏈接檢查器工具2025年最佳10個最佳免費反向鏈接檢查器工具Mar 21, 2025 am 08:28 AM

網站建設只是第一步:SEO與反向鏈接的重要性 建立網站只是將其轉化為寶貴營銷資產的第一步。您需要進行SEO優化,以提高網站在搜索引擎中的可見度,吸引潛在客戶。反向鏈接是提升網站排名的關鍵,它向谷歌和其他搜索引擎表明您的網站權威性和可信度。 並非所有反向鏈接都有利:識別並避免有害鏈接 並非所有反向鏈接都有益。有害鏈接會損害您的排名。優秀的免費反向鏈接檢查工具可以監控鏈接到您網站的來源,並提醒您注意有害鏈接。此外,您還可以分析競爭對手的鏈接策略,從中學習借鑒。 免費反向鏈接檢查工具:您的SEO情報員

美的推出首款DeepSeek空調:AI語音交互 可實現40萬 條指令!美的推出首款DeepSeek空調:AI語音交互 可實現40萬 條指令!Mar 12, 2025 pm 12:18 PM

美的即将发布搭载DeepSeek大模型的首款空调——美的鲜净感空气机T6,发布会定于3月1日下午1点30分举行。这款空调配备先进的空气智驾系统,可根据环境智能调节温度、湿度和风速等参数。更重要的是,它集成了DeepSeek大模型,支持超过40万条AI语音指令。美的此举引发业界热议,尤其关注白电产品与大模型结合的意义。不同于传统空调简单的温度设定,美的鲜净感空气机T6能够理解更复杂、更模糊的指令,并根据家庭环境智能调节湿度等,显著提升用户体验。

百度又一國民產品接入DeepSeek,是想開了還是跟風?百度又一國民產品接入DeepSeek,是想開了還是跟風?Mar 12, 2025 pm 01:48 PM

DeepSeek-R1賦能百度文庫與網盤:深度思考與行動的完美融合短短一個月內,DeepSeek-R1已迅速融入眾多平台。百度憑藉大膽的戰略佈局,將DeepSeek作為第三方模型夥伴,整合進自身生態系統,這標誌著其“大模型 搜索”生態戰略的重大進展。百度搜索和文心智能體平台率先接入DeepSeek及文心大模型的深度搜索功能,為用戶提供免費的AI搜索體驗。同時,“百度一下,你就知道”的經典slogan回歸,新版百度APP也整合了文心大模型和DeepSeek的能力,推出“AI搜索”、“全網信息提煉”

及時的網絡開發工程及時的網絡開發工程Mar 09, 2025 am 08:27 AM

AI及時的代碼生成工程:開發人員指南代碼開發的景觀已準備好進行重大轉變。 掌握大型語言模型(LLM)和及時工程對於未來幾年對開發人員至關重要。 Th

使用GO構建網絡漏洞掃描儀使用GO構建網絡漏洞掃描儀Apr 01, 2025 am 08:27 AM

此基於GO的網絡漏洞掃描儀有效地確定了潛在的安全弱點。 它利用了GO的並發功能的速度功能,包括服務檢測和漏洞匹配。讓我們探索它的能力和道德

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)