当前位置: 首页 > news >正文

React实战之将数据库返回的时间转换为几分钟前、几小时前、几天前的形式。...

React实战之将数据库返回的时间转换为几分钟前、几小时前、几天前的形式。

不知道大家的时间格式是什么样子的,我先展示下我这里数据库返回的时间格式

‘2019-05-05T15:52:19Z’

是这个样子的,然后上代码:

在utils文件下创建文件time.js文件

time.js

export default function time(UTCtiem) {
    var T_pos = UTCtiem.indexOf('T');
    var Z_pos = UTCtiem.indexOf('Z');
    var year_month_day = UTCtiem.substr(0, T_pos);
    var hour_minute_second = UTCtiem.substr(T_pos + 1, Z_pos - T_pos - 1);
    var new_datetime = year_month_day + " " + hour_minute_second; 

    var dateTime = new Date(new_datetime);

    var no1new = dateTime.valueOf();

    var year = dateTime.getFullYear();
    var month = dateTime.getMonth() + 1;
    var day = dateTime.getDate();
    var hour = dateTime.getHours();
    var minute = dateTime.getMinutes();
    var second = dateTime.getSeconds();
    var now = new Date();
    var now_new = now.valueOf();  //typescript转换写法

    var milliseconds = 0;
    var timeSpanStr;

    milliseconds = now_new - no1new;

    if (milliseconds <= 1000 * 60 * 1) {
        timeSpanStr = '刚刚';
    }
    else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) {
        timeSpanStr = Math.round((milliseconds / (1000 * 60))) + '分钟前';
    }
    else if (1000 * 60 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24) {
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + '小时前';
    }
    else if (1000 * 60 * 60 * 24 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24 * 15) {
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + '天前';
    }
    else if (milliseconds > 1000 * 60 * 60 * 24 * 15 && year == now.getFullYear()) {
        timeSpanStr = month + '-' + day + ' ' + hour + ':' + minute;
    } else {
        timeSpanStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
    }
    return timeSpanStr;

}

  

用法:

先需要import,具体看各位的路径

import time from '../utils/time';    //这里请注意自己的路径

let times = time('2019-06-05T15:32:19Z');

console.log('times',times);

 

代码就是这样!!!

转载于:https://www.cnblogs.com/Yu-Shuai/p/10980173.html

相关文章:

  • 2、CDH组件安装
  • 第一章 Vue介绍
  • awk使用记录
  • (¥1011)-(一千零一拾一元整)输出
  • 第六章 组件 51 组件化和模块化的区别
  • 如何回答——请简述MySQL索引类型
  • WUSTOJ 1307: 校门外的树(Java)
  • 【java】查重类的实现
  • 解决Visual Studio 2017隐藏“高级保存选项”命令
  • 深入理解HashMap(JDK1.8)
  • install web3 1.0
  • 1_achcom
  • WinServer-SMTP服务
  • maccms代码审计
  • 模块封装与程序集
  • 【159天】尚学堂高琪Java300集视频精华笔记(128)
  • 【css3】浏览器内核及其兼容性
  • 3.7、@ResponseBody 和 @RestController
  • java小心机(3)| 浅析finalize()
  • Mithril.js 入门介绍
  • OSS Web直传 (文件图片)
  • Solarized Scheme
  • spring-boot List转Page
  • vue.js框架原理浅析
  • 动态规划入门(以爬楼梯为例)
  • 两列自适应布局方案整理
  • 盘点那些不知名却常用的 Git 操作
  • 前嗅ForeSpider中数据浏览界面介绍
  • 如何优雅地使用 Sublime Text
  • 实现菜单下拉伸展折叠效果demo
  • 提醒我喝水chrome插件开发指南
  • 微信小程序设置上一页数据
  • 怎样选择前端框架
  • 正则表达式小结
  • [Shell 脚本] 备份网站文件至OSS服务(纯shell脚本无sdk) ...
  • const的用法,特别是用在函数前面与后面的区别
  • hi-nginx-1.3.4编译安装
  • 完善智慧办公建设,小熊U租获京东数千万元A+轮融资 ...
  • #Z2294. 打印树的直径
  • #我与Java虚拟机的故事#连载06:收获颇多的经典之作
  • (17)Hive ——MR任务的map与reduce个数由什么决定?
  • (C语言)逆序输出字符串
  • (八)Flask之app.route装饰器函数的参数
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (转)IIS6 ASP 0251超过响应缓冲区限制错误的解决方法
  • (转)菜鸟学数据库(三)——存储过程
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • (轉貼) UML中文FAQ (OO) (UML)
  • *2 echo、printf、mkdir命令的应用
  • .NET 5.0正式发布,有什么功能特性(翻译)
  • .NET C# 使用 SetWindowsHookEx 监听鼠标或键盘消息以及此方法的坑
  • .NET 命令行参数包含应用程序路径吗?
  • .NET 中创建支持集合初始化器的类型
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)