JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式


Posted in Javascript onJuly 10, 2019

最近在做项目的时候,需要把后台返回的时间转换成几秒前、几分钟前、几小时前、几天前等的格式;后台返回的时间格式为:2015-07-30 09:36:10,需要根据当前的时间与返回的时间进行对比,最后显示成几秒前、几分钟前、几小时前、几天前的形式。

1.由于返回的时间是字符串格式,所以要先转换成时间戳

//字符串转换为时间戳
function getDateTimeStamp (dateStr) {
  return Date.parse(dateStr.replace(/-/gi,"/"));
}

2.将返回的时间戳与当前时间戳进行比较,转换成几秒前、几分钟前、几小时前、几天前的形式。

function getDateDiff (dateStr) {
  var publishTime = getDateTimeStamp(dateStr)/1000,
    d_seconds,
    d_minutes,
    d_hours,
    d_days,
    timeNow = parseInt(new Date().getTime()/1000),
    d,
    date = new Date(publishTime*1000),
    Y = date.getFullYear(),
    M = date.getMonth() + 1,
    D = date.getDate(),
    H = date.getHours(),
    m = date.getMinutes(),
    s = date.getSeconds();
    //小于10的在前面补0
    if (M < 10) {
      M = '0' + M;
    }
    if (D < 10) {
      D = '0' + D;
    }
    if (H < 10) {
      H = '0' + H;
    }
    if (m < 10) {
      m = '0' + m;
    }
    if (s < 10) {
      s = '0' + s;
    }
  d = timeNow - publishTime;
  d_days = parseInt(d/86400);
  d_hours = parseInt(d/3600);
  d_minutes = parseInt(d/60);
  d_seconds = parseInt(d);
  if(d_days > 0 && d_days < 3){
    return d_days + '天前';
  }else if(d_days <= 0 && d_hours > 0){
    return d_hours + '小时前';
  }else if(d_hours <= 0 && d_minutes > 0){
    return d_minutes + '分钟前';
  }else if (d_seconds < 60) {
    if (d_seconds <= 0) {
      return '刚刚发表';
    }else {
      return d_seconds + '秒前';
    }
  }else if (d_days >= 3 && d_days < 30){
    return M + '-' + D + ' ' + H + ':' + m;
  }else if (d_days >= 30) {
    return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
  }
}

3.使用方法:

dateStr:返回的时间字符串,格式如:2015-07-30 09:36:10

// 转换后的结果 
var str = getDateDiff(dateStr);
// 在控制台输出结果 
console.log(str);

总结

以上所述是小编给大家介绍的JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
原生JS实现相邻月份日历
Oct 13 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 #Javascript
js Array.slice的8种不同用法示例
Jul 10 #Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 #Javascript
Vue编程式跳转的实例代码详解
Jul 10 #Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 #Javascript
Vue事件修饰符native、self示例详解
Jul 09 #Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 #Javascript
You might like
献给php初学者(入门学习经验谈)
2010/10/12 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python中的Matplotlib模块入门教程
2015/04/15 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
二年级学生评语大全
2014/04/23 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
小学生家长意见
2015/06/03 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript