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);
代码就是这样!!!
React实战之将数据库返回的时间转换为几分钟前、几小时前、几天前的形式。的更多相关文章
- JS对象 返回/设置时间方法 get/setTime() 返回/设置时间,单位毫秒数 一小时为:60*60*1000
返回/设置时间方法 get/setTime() 返回/设置时间,单位毫秒数,计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数. 如果将目前日期对象的时间推迟1小时,代码如下: &l ...
- MySQL 查询大于“时间字段”15分钟、1小时、1天的数据
以下代码中times为时间字段,类型为datetime 1.查询大于times十五分钟的数据 //大于号后面都是获取times十五分钟后的时间select*from table where now() ...
- 【视频合集】极客时间 react实战进阶45讲 【更新中】
https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...
- react实战 系列 —— React 的数据流和生命周期
其他章节请看: react实战 系列 数据流和生命周期 如何处理 React 中的数据,组件之间如何通信,数据在 React 中如何流动? 常用的 React 生命周期方法以及开源项目 spug 中使 ...
- react实战系列 —— React 中的表单和路由的原理
其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...
- 往MySQL数据库datetime类型字段中插入数据库的当前时间
代码: StringBuilder sb = new StringBuilder(); sb.append(" insert into uosdetailfile ("); sb. ...
- React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
- 如何诊断rac环境sysdate 返回的时间错误
最近处理了若干rac环境访问sysdate错误的时间返回.而这个问题通常是一个数据库链接是由现在Listener创建的情况下.并且.大部分情况下都是和时区设置相关的.在这篇文章中我们会针对怎样诊断这样 ...
- 从零开始react实战:云书签-1 react环境搭建
总览篇:react 实战之云书签 本篇是实战系列的第一篇,主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能: antd 组件库按需引入 ,支持主题定制 支持 l ...
随机推荐
- Codeforces 938G(cdq分治+可撤销并查集+线性基)
题意: 有一个无向连通图,支持三个操作: 1 x y d : 新建一条x和y的无向边,长度为d 2 x y :删除x和y之间的无向边 3 x y :询问x到y的所有路径中(可以绕环)最短的 ...
- c++之NVI手法
non-virtual interface(NVI)手法:令用户通过public non-virtual成员函数间接调用private virtual函数,将这个non-virtual函数称为virt ...
- Solidworks drwdot文件如何打开,如何制作Solidworks工程图模板
1 直接把这个文件拖放进Solidworks窗口 2 文件-保存图纸格式,另存为模板(slddrt文件) 3 搜索"Solidworks工程图如何使用,替换图纸格式模板文件.doc& ...
- 畅通project续
Time Limit : 3000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Submission(s) ...
- ART虚拟机之Trace原理(转)
一.概述 Android 6.0系统采用的art虚拟机,所有的Java进程都运行在art之上,当应用发生ANR(Application Not Response,其中最终的一个环节便是向目标进程发送信 ...
- PAT-PAT (Advanced Level) Practise 1001. A+B Format (20) 【二星级】
题目链接:http://www.patest.cn/contests/pat-a-practise/1001 题面: 1001. A+B Format (20) Calculate a + b and ...
- 【HRS项目】Axure兴许问题解决---与SVN结合
上一篇博客介绍了Axure的团队开发用法,http://blog.csdn.net/u013036274/article/details/50999139,可是再用的时候发现会出现这种问题,例如以下图 ...
- 如何用DOS命令,获取一个目录下的文件数目
发信人: GOOGOODALLS (我爱Figo), 信区: DOS 标 题: 如何用DOS命令,获取一个目录下的文件数目? 发信站: 水木社区 (Fri Mar 9 08:40:01 2007) ...
- Koa2学习(九)与mongoDB交互
Koa2学习(九)与mongoDB交互 数据库下载与安装 windows下载地址:http://dl.mongodb.org/dl/win32/x86_64 linux下载地址:https://www ...
- Posting array of JSON objects to MVC3 action method via jQuery ajax
Does the model binder not suport arrays of JSON objects? The code below works when sending a single ...