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 ...
随机推荐
- web.py 使用 db.select 返回的数据只能遍历一次
2013-10-05 23:04:33| 1. web.py 使用 db.select 返回的数据只能遍历一次import webdb = web.database(dbn='mysql', db ...
- Java生成验证码并进行验证(转)
本文转自http://blog.csdn.net/worm0527/article/details/51030864 一.实现思路 使用BufferedImage用于在内存中存储生成的验证码图片 使用 ...
- [开源]OSharpNS - .net core 快速开发框架 - 简介
什么是OSharp OSharpNS全称OSharp Framework with .NetStandard2.0,是一个基于.NetStandard2.0开发的一个.NetCore快速开发框架.这个 ...
- org.hibernate.AnnotationException: No identifier specified for entity:
使用hibernate的e-r映射pojo类的时候遇到org.hibernate.AnnotationException: No identifier specified for entity的异常, ...
- Python 之 读取txt文件
本文直接给出三种实现方法,代码例如以下. 方法一: f = open("Proc_Data.txt") # 返回一个文件对象 line = f.readline() # 调用文件的 ...
- XxPay支付系统-boot版本 使用
https://segmentfault.com/a/1190000016987391?utm_source=tag-newest 有三个版本: spring boot 版本: spring clou ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- Hadoop之中的一个:Hadoop的安装部署
说到Hadoop不得不说云计算了,我这里大概说说云计算的概念,事实上百度百科里都有,我仅仅是copy过来,好让我的这篇hadoop博客内容不显得那么单调.骨感.云计算近期今年炒的特别火,我也是个刚開始 ...
- Android之弹出多级菜单
使用布局文件创建菜单:(多级菜单) 在res下创建目录menu(假设已经有啦就不用再创建了) 在该menu目录下创建XML文件这里我把文件名称命名为menu 在创建的menu.XML文件里 写入: & ...
- asp.net编码解码的两篇文章
http://www.cnblogs.com/freshman0216/p/4165949.html http://www.cnblogs.com/freshman0216/p/4172655.htm ...