js实现类似微博根据发布时间，给信息加上“刚刚”“一分钟前”“一小时前”

我们经常能看到QQ空间、微博等一些地方，回复了留言并不是直接显示时间，而是显示比如：“刚刚”“1分钟前”“半小时前”“1天前”等。今天来分享一下。

具体效果，如下图：

案例地址：
http://build.gzwhir.com/sxrz201312107101/web/fans.shtml

思路简单分析：
第一种也是比较推荐的一种是后端程序输出之前处理。
第二种是输出之后js处理。

我是前端所以第一种方式就略过了，简单说下js实现方式。
首先要在页面某处设置一个容器存储时间，然后通过js获取时间转化成时间戳，之后进行换算月、日、时、分，通过时间区间来设置需要显示的文字。

具体代码如下：

<div class="Message_list"><ul><li><h1 class="h1">留言者：<span>小小球迷</span>    <span class="time" time="2014-02-22 14:00:00"></h1><div class="txt">有这么厉害的攻击力？全面开火的攻击巴萨和拜仁？我不敢苟同这个观点</div></li><li><h1 class="h1">留言者：<span>风花雪月</span>    <span class="time" time="2014-01-14"></h1><div class="txt">还记得银河战舰这个吗，这个是我们皇马球迷最骄傲的名字~</div></li><li><h1 class="h1">留言者：<span>小捣蛋</span>    <span class="time" time="2014-02-20"></h1><div class="txt">有这么厉害的攻击力？全面开火的攻击巴萨和拜仁？我不敢苟同这个观点</div></li>......</ul>
</div>

我们再span设置了一个”time”的属性用来存储时间

//JS转换时间戳为“刚刚”、“1分钟前”、“2小时前”“1天前”等格式var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;var halfamonth = day * 15;var month = day * 30;function getDateDiff(dateTimeStamp) {//若你得到的时间格式不是时间戳，可以使用下面的JavaScript函数把字符串转换为时间戳, 本函数的功能相当于JS版的strtotime：var idata = Date.parse(dateTimeStamp.replace(/-/gi,"/"));  //js函数代码：字符串转换为时间var now = new Date().getTime();var diffValue = now - idata;if (diffValue < 0) {//若日期不符则弹出窗口告之//alert("结束日期不能小于开始日期！");}var monthC = diffValue / month;var weekC = diffValue / (7 * day);var dayC = diffValue / day;var hourC = diffValue / hour;var minC = diffValue / minute;if (monthC >= 1) {result = "发表于" + parseInt(monthC) + "个月前";}else if (weekC >= 1) {result = "发表于" + parseInt(weekC) + "周前";}else if (dayC >= 1) {result = "发表于" + parseInt(dayC) + "天前";}else if (hourC >= 1) {result = "发表于" + parseInt(hourC) + "个小时前";}else if (minC >= 1) {result = "发表于" + parseInt(minC) + "分钟前";} elseresult = "刚刚发表";return result;}//进行文字替换$(".Message_list li").each(function (i, item) {var time = $(item).find(".time").attr("time");var spantext = getDateDiff(time);$(item).find(".time").text(spantext);})

js实现类似微博根据发布时间，给信息加上“刚刚”“一分钟前”“一小时前”相关推荐

使用day.js让时间 (显示为几分钟前几小时前几天前几个月前 )
效果图代码 utils.ts 通过引入utils.ts import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; import relative ...
微信小程序-将时间转换成几秒前几分钟前几小时前几天前等时间格式
描述: 显示消息时间为几天前几小时前几分钟前:同时一年以上的日期直接显示YYY:MM:DD形式效果: 方法实现: 可以在utils目录下建一个存放公共方法的文件,将getDateDiff方法放 ...
PHP人性化时间显示,实现多少秒前,多少分钟前,多少小时前
现在很多网站的时间显示都很人性化,不再是单纯的年月日时分秒,而是根据数据更新的时间与当前时间进行比较,实现多少秒前,多少分钟前,多少小时前! //人性化时间显示 function formatTime ...
类似新浪微博动态发布时间转换机制，显示刚刚、几分钟前、几小时前、昨天、前天····
经常看到社交类app中关于动态发布的时间点与当前时间的换算,说麻烦也不麻烦,说简单也不简单,只是计算起来有点绕.如以当前时间为基准,自己某个时间在微博上发表一个动态,发表时间提示有多种显示,如刚刚.几 ...
android 各个版本的发布时间和信息
Android各个版本的发布时间 Android主流版本.发布时间和对应的API level 版本名称Code name 名称版本版本发布时间对应API (no code name) 1.0 2 ...
JS 时间转化为几分钟前几小时前几天前
背景:最近公司要做动态列表,类似于微信朋友圈.动态创建时间就需要显示为刚刚.几分钟前.几小时前.几天前.2018-05-15,这样的形式. 代码如下 var minute = 1000 * 60;v ...
小程序--时间处理(显示几分钟前,,几小时前,,几天前...)
效果图 (通过js实现对时间处理); 这是时间处理的函数, 代码注释说明的也还清楚, 这是文件链接,可以直接打开,保存一下 https://blog-static.cnblogs.com/fil ...
php时间转分钟前,PHP把时间转换成几分钟前几小时前几天前
现在很多网站将时间的显示都变得比较人性化,今天项目有一个也需要在对应的资讯后面显示为几分钟前.几小时前,接下来吾爱编程为大家分享一下PHP把时间转换成几分钟前.几小时前几天前的方法,有需要的小伙伴可以 ...
C#：把发表的时间改为几个月,几天前,几小时前,几分钟前,或几秒前
C# public string DateStringFromNow(DateTime dt) { TimeSpan span = DateTime.Now - dt; if (span.TotalD ...
时间格式化几分钟前几小时前几天前
/*** 时间24小时显示格式化*/ public class FormatDateUtils {/**// 一小时以内显示几分钟前:// 24小时内显示几小时前:// 超过24小时三天内(含三天)显 ...

js实现类似微博根据发布时间，给信息加上“刚刚”“一分钟前”“一小时前”

js实现类似微博根据发布时间，给信息加上“刚刚”“一分钟前”“一小时前”相关推荐

最新文章

热门文章