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 关闭IE6、IE7
Jun 01 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
Angular2的管道Pipe的使用方法
Nov 07 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
JS实现放大镜效果
Sep 21 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
一个颜色轮换的简单例子
2006/10/09 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
JS实现图片放大缩小的方法
2017/02/15 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
关于react中组件通信的几种方式详解
2017/12/10 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python在非root权限下的安装方法
2018/01/23 Python
python组合无重复三位数的实例
2018/11/13 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
教师师德反思材料
2014/02/15 职场文书
大型活动组织方案
2014/05/10 职场文书
总经理人事任命书
2014/06/05 职场文书
2014年城市管理工作总结
2014/12/02 职场文书