JS根据Unix时间戳显示发布时间是多久前【项目实测】

 更新时间:2019年07月10日 09:40:19   作者:行星带  
小编最近在实现这样的需求类似微信朋友圈显示发布时间为距离当前时间多久之前这样的功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

后台接口给的时间数据为Unix时间戳,我们的需求是显示类似微信朋友圈显示发布时间为距离当前时间多久之前,“xx分钟之前”,“xx小时之前”,“xx个月之前”。

类似这样的时间显示效果:

转换函数:

/**
 * Unix时间戳转换为当前时间多久之前
 * @param timespan int     Unix时间戳
 * @return timeSpanStr string   转换之后的前台需要的字符串
 */
function Ftime (timespan) {
  var dateTime = new Date(timespan * 1000);
  var year = dateTime.getFullYear();
  var month = dateTime.getMonth() + 1;
  var day = dateTime.getDate();
  var hour = dateTime.getHours();
  var minute = dateTime.getMinutes();
  //当前时间
  var now = Date.parse(new Date()); //typescript转换写法
  var milliseconds = 0;
  var timeSpanStr;
  //计算时间差
  milliseconds = (now / 1000) - timespan;

  //一分钟以内
  if (milliseconds <= 60) {
    timeSpanStr = '刚刚';
  }
  //大于一分钟小于一小时
  else if (60 < milliseconds && milliseconds <= 60 * 60) {
    timeSpanStr = Math.ceil((milliseconds / (60))) + '分钟前';
  }
  //大于一小时小于等于一天
  else if (60 * 60 < milliseconds && milliseconds <= 60 * 60 * 24) {
    timeSpanStr = Math.ceil(milliseconds / (60 * 60)) + '小时前';
  }
  //大于一天小于等于15天
  else if (60 * 60 * 24 < milliseconds && milliseconds <= 60 * 60 * 24 * 30) {
    timeSpanStr = Math.ceil(milliseconds / (60 * 60 * 24)) + '天前';
  }
  //大于一个月小于一年
  else if (60 * 60 * 24 * 30 < milliseconds && milliseconds <= 60 * 60 * 24 * 30 * 12){
    timeSpanStr = Math.ceil(milliseconds / (60 * 60 * 24 * 30)) + '个月前';
  }
  //超过一年显示
  else {
    timeSpanStr = year + '年' + month + '月' + day + '日 ' + hour + ':' + minute;  
  }
  return timeSpanStr;
}

总结

以上所述是小编给大家介绍的JS根据Unix时间戳显示发布时间是多久前 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • JS、CSS以及img对DOMContentLoaded事件的影响

    JS、CSS以及img对DOMContentLoaded事件的影响

    最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome开发者工具的Timeline分析面板,以及DOMContentLoaded事件。一个是强大的令人发指的性能分析工具,一个是重要的性能指标,于是就用Timeline对DOMContentLoaded事件进行了一番研究
    2014-08-08
  • js实现购物网站放大镜功能

    js实现购物网站放大镜功能

    这篇文章主要为大家详细介绍了js实现购物网站放大镜功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 如何基于js判断浏览器版本

    如何基于js判断浏览器版本

    这篇文章主要介绍了如何基于js判断浏览器版本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 无缝滚动改进版支持上下左右滚动(封装成函数)

    无缝滚动改进版支持上下左右滚动(封装成函数)

    无缝滚动改进版,封装成函数,同时支持上下左右无缝滚动。
    2012-12-12
  • Javascript动画效果(2)

    Javascript动画效果(2)

    这篇文章主要为大家详细介绍了第二篇Javascript动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JS利用时间戳倒计时的实现示例

    JS利用时间戳倒计时的实现示例

    这篇文章主要介绍了JS利用时间戳倒计时的实现示例,本文将提供代码示例和详细的步骤,帮助你实现一个简单而实用的时间戳倒计时,感兴趣的可以了解一下
    2023-12-12
  • javascript数组遍历的方法实例分析

    javascript数组遍历的方法实例分析

    这篇文章主要介绍了javascript数组遍历的方法,结合实例形式分析了javascript数组遍历及相关的some、every、filter、map等方法的使用技巧,需要的朋友可以参考下
    2016-09-09
  • layui结合form,table的全选、反选v1.0示例讲解

    layui结合form,table的全选、反选v1.0示例讲解

    今天小编就为大家分享一篇layui结合form,table的全选、反选v1.0示例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • js改变文章字体大小的实例代码

    js改变文章字体大小的实例代码

    这篇文章主要介绍了js改变文章字体大小的实例代码,有需要的朋友可以参考一下
    2013-11-11
  • Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

    Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

    前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题,具体操作方法,大家通过本文了解下吧
    2017-07-07

最新评论