首页 >科技周边 >IT业界 >时间前：如何显示出版日期作为时间以来的时间

时间前：如何显示出版日期作为时间以来的时间

Lisa Kudrow原创: 2025-02-19 12:02:10572浏览

钥匙要点

>显示出发布日期以来发布的时间以来的时间，例如“ 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中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Using the Battery Status API to Optimize Your Development下一篇：How to Respond to Profit Share Offers

查看更多