优化时间显示为几分钟、几小时前的程序实现方法

发布时间:2022-06-01浏览次数:841 次
经常在我们访问一些博客、资讯等网站时,会看到一些文章前端显示的发布时间显示为几小时前,几周前,这样的时间显示在用户体验上比传统的某年某月某日好很多,显然这种效果

经常在我们访问一些博客、资讯等网站时,会看到一些文章前端显示的发布时间显示为几小时前,几周前,这样的时间显示在用户体验上比传统的某年某月某日好很多,显然这种效果的实现,最易操作的还是通过程序语言来控制输出,那么在程序端,我们该如何实现合种效果呢?

解决的思路就是在输出时间时,对时间进行实时加工。文章发布时间为过去的某个时间点,因此,我们可以使用当前时间与文章发布时间的时间戳之差来进行判断后优化时间输出,如:

当前时间 - 发布时间  > 24*60*60,则文章为一天前所发布的。更详细的代码实现如下:

/**
 * 时间重写美化
 * @param int $time 时间字符串
 * @return string
 */
function formatTime(string $time = ''): string
{
    $time = $time == '' ? time() : strtotime($time);
    $diff = time() - $time;
    $text = '';
    switch ($diff) {
        case $diff <= 10:
            $text = '刚刚';
            break;
        case $diff < 60:
            $text = $diff . ' 秒前';
            break;
        case $diff < (60 * 60):
            $text = floor($diff / 60) . ' 分钟前';
            break;
        case $diff < (60 * 60 * 24):
            $text = floor($diff / (60 * 60)) . ' 小时前';
            break;
        case $diff < (60 * 60 * 24 * 3):
            $text = floor($diff / (60 * 60 * 24)) == 1 ?
            '昨天 ' . date('H:i', $diff) : 
            '前天 ' . date('H:i', $diff);
            break;
        case $diff < (60 * 60 * 24 * 365):
            $text = date('m-d H:i', $time);
            break;
        default:
            $text = date('Y年m月d日', $time);
            break;
    }
    return $text;
}

这段代码里,我们是对时间字符串先转为时间戳,再进行转化的,大家如果使用的是时间戳,那么可以去掉转换的步骤。

另外,做前端切图工作的童鞋也要注意了,如果是在文章列表中,存在时间及其他的附加信息(比如文章阅读量)时,大部分前端开发者都是采用的浮动布局,但在优化时间显示之后,时间部分的长度就不统一了,此时会有错位感,需要使用flex对附加信息部分进行重新布局,或者给时间部分给固定宽度值。

扫一扫,在手机上查看