仿照Wechat生活圈公布时间,网页前端

模仿微信朋友圈发布时间,使用扩展方法将将过去时间展示成xx(秒/分/小时/天)前,以留言列表中的留言时间为例,先来看一下直接的时间展示效果(date.ToString("yyyy/MM/dd HH:mm:ss"))

1、时间戳显示

经常可以看到论坛或者新闻上,时间戳为刚刚,xx分钟前,xx小时前等字样,前端如何实现呢?

图片 1

 

图片 2

2、时间戳实现

这个功能比较简单,直接上函数,time_str是时间戳的字符串结果,转换成Date对象,

Date对象可以获取年月日等信息,new一个Date表示当前时间,相关信息进行比较之后,定制返回结果即可。

 

//时间处理函数,多少分钟前,多少小时前,超过24小时显示日期,超过一年显示年月日
        getTimeShow:function(time_str){
            //debugger;
            var now = new Date();
            var date = new Date(time_str);
            //计算时间间隔,单位为分钟
            var inter = parseInt((now.getTime() - date.getTime())/1000/60);
            if(inter == 0){
                return "刚刚";
            }
            //多少分钟前
            else if(inter < 60){
                return inter.toString() "分钟前";
            }
            //多少小时前
            else if(inter < 60*24){
                return parseInt(inter/60).toString() "小时前";
            }
            //本年度内,日期不同,取日期 时间  格式如  06-13 22:11
            else if(now.getFullYear() == date.getFullYear()){
                return (date.getMonth() 1).toString() "-"
                    date.getDate().toString() " "
                    date.getHours() ":"
                    date.getMinutes();
            }
            else{
                return date.getFullYear().toString().substring(2, 3) "-"
                (date.getMonth() 1).toString() "-"
                date.getDate().toString() " "
                date.getHours() ":"
                date.getMinutes();
            }
        },

 

 

感觉很一般,没有什么特别

3、实现效果

 

图片 3

下面 我们写一个拓展方法,将留言时间格式化成xx(秒/分/小时/天)前

decimal.Truncate(data)//取decimal整数位

public static class HtmlExpansion
{   //只格式化2天内的时间
    public static string AgoDateFomat(this DateTime date)
        {
            var times = DateTime.Now - date;
            var s = Convert.ToDecimal(times.TotalSeconds);//秒
            var m = Convert.ToDecimal(times.TotalMinutes);//分钟
            var h = Convert.ToDecimal(times.TotalHours);//小时
            var d = Convert.ToDecimal(times.TotalDays);//天

            return s < 60 ? ""   decimal.Truncate(s)   " 秒前" : m < 60 ? ""   decimal.Truncate(m)   " 分钟前" : h < 24 ? ""   decimal.Truncate(h)   " 小时前" : d < 2 ? ""   decimal.Truncate(d)   " 天前" : date.ToString("yyyy/MM/dd HH:mm:ss");
        }
}

直接在date后面调用date.AgoDateFomat(),展示效果如下

图片 4

效果图

图片 5

是不是感觉比之前的时间高大上了一点

====完===

本文由星彩网app下载发布于计算机编程,转载请注明出处:仿照Wechat生活圈公布时间,网页前端

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。