问题是如何将JavaScript格式化Date
为字符串,以说明经过的时间,类似于您看到Stack Overflow上显示的时间的方式。
例如
- 1分钟前
- 1小时前
- 1天前
- 1个月前
- 1年以前
问题是如何将JavaScript格式化Date
为字符串,以说明经过的时间,类似于您看到Stack Overflow上显示的时间的方式。
例如
Answers:
function timeSince(date) {
var seconds = Math.floor((new Date() - date) / 1000);
var interval = Math.floor(seconds / 31536000);
if (interval > 1) {
return interval + " years";
}
interval = Math.floor(seconds / 2592000);
if (interval > 1) {
return interval + " months";
}
interval = Math.floor(seconds / 86400);
if (interval > 1) {
return interval + " days";
}
interval = Math.floor(seconds / 3600);
if (interval > 1) {
return interval + " hours";
}
interval = Math.floor(seconds / 60);
if (interval > 1) {
return interval + " minutes";
}
return Math.floor(seconds) + " seconds";
}
var aDay = 24*60*60*1000;
console.log(timeSince(new Date(Date.now()-aDay)));
console.log(timeSince(new Date(Date.now()-aDay*2)));
在这种情况下,可能会算是过大杀伤力,但是如果机会显示moment.js真是太棒了!
Moment.js是一个JavaScript日期时间库,要在这种情况下使用它,您可以执行以下操作:
moment(yourdate).fromNow()
http://momentjs.com/docs/#/displaying/fromnow/
2018附录:卢森堡是一个新的现代图书馆,可能值得一看!
我没有检查(尽管并不难),但是我认为Stack Exchange网站使用该jquery.timeago
插件来创建这些时间字符串。
使用该插件非常容易,它很干净,并且会自动更新。
这是一个快速示例(来自插件的主页):
首先,加载jQuery和插件:
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.timeago.js" type="text/javascript"></script>
现在,让我们将其附加到准备好DOM的时间戳上:
jQuery(document).ready(function() {
jQuery("abbr.timeago").timeago(); });这会将所有标题
abbr
为timeago
且带有ISO 8601时间戳记的元素<abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>
转换为<abbr class="timeago" title="July 17, 2008">about a year ago</abbr>
大约一年前的内容:随着时间的流逝,时间戳将自动更新。
这将向您显示过去和以前的时间格式,例如“ 2天前”,“从现在开始10分钟”,您可以将其传递给Date对象,数字时间戳或日期字符串
function time_ago(time) {
switch (typeof time) {
case 'number':
break;
case 'string':
time = +new Date(time);
break;
case 'object':
if (time.constructor === Date) time = time.getTime();
break;
default:
time = +new Date();
}
var time_formats = [
[60, 'seconds', 1], // 60
[120, '1 minute ago', '1 minute from now'], // 60*2
[3600, 'minutes', 60], // 60*60, 60
[7200, '1 hour ago', '1 hour from now'], // 60*60*2
[86400, 'hours', 3600], // 60*60*24, 60*60
[172800, 'Yesterday', 'Tomorrow'], // 60*60*24*2
[604800, 'days', 86400], // 60*60*24*7, 60*60*24
[1209600, 'Last week', 'Next week'], // 60*60*24*7*4*2
[2419200, 'weeks', 604800], // 60*60*24*7*4, 60*60*24*7
[4838400, 'Last month', 'Next month'], // 60*60*24*7*4*2
[29030400, 'months', 2419200], // 60*60*24*7*4*12, 60*60*24*7*4
[58060800, 'Last year', 'Next year'], // 60*60*24*7*4*12*2
[2903040000, 'years', 29030400], // 60*60*24*7*4*12*100, 60*60*24*7*4*12
[5806080000, 'Last century', 'Next century'], // 60*60*24*7*4*12*100*2
[58060800000, 'centuries', 2903040000] // 60*60*24*7*4*12*100*20, 60*60*24*7*4*12*100
];
var seconds = (+new Date() - time) / 1000,
token = 'ago',
list_choice = 1;
if (seconds == 0) {
return 'Just now'
}
if (seconds < 0) {
seconds = Math.abs(seconds);
token = 'from now';
list_choice = 2;
}
var i = 0,
format;
while (format = time_formats[i++])
if (seconds < format[0]) {
if (typeof format[2] == 'string')
return format[list_choice];
else
return Math.floor(seconds / format[2]) + ' ' + format[1] + ' ' + token;
}
return time;
}
var aDay = 24 * 60 * 60 * 1000;
console.log(time_ago(new Date(Date.now() - aDay)));
console.log(time_ago(new Date(Date.now() - aDay * 2)));
return time;
与format = time_formats[time_formats.length - 1]; return Math.floor(seconds / format[2]) + ' ' + format[1] + ' ' + token;
以回报世纪以来,大的时间跨度内,而不是毫秒。
这是对Sky Sander解决方案的微小修改,该解决方案允许将日期作为字符串输入,并且能够显示跨度,例如“ 1分钟”而不是“ 73秒”
var timeSince = function(date) {
if (typeof date !== 'object') {
date = new Date(date);
}
var seconds = Math.floor((new Date() - date) / 1000);
var intervalType;
var interval = Math.floor(seconds / 31536000);
if (interval >= 1) {
intervalType = 'year';
} else {
interval = Math.floor(seconds / 2592000);
if (interval >= 1) {
intervalType = 'month';
} else {
interval = Math.floor(seconds / 86400);
if (interval >= 1) {
intervalType = 'day';
} else {
interval = Math.floor(seconds / 3600);
if (interval >= 1) {
intervalType = "hour";
} else {
interval = Math.floor(seconds / 60);
if (interval >= 1) {
intervalType = "minute";
} else {
interval = seconds;
intervalType = "second";
}
}
}
}
}
if (interval > 1 || interval === 0) {
intervalType += 's';
}
return interval + ' ' + intervalType;
};
var aDay = 24 * 60 * 60 * 1000;
console.log(timeSince(new Date(Date.now() - aDay)));
console.log(timeSince(new Date(Date.now() - aDay * 2)));
interval = Math.floor(seconds / 60);
。我加入interval = seconds;
了决赛else
,效果很好。
let seconds = Math.floor((+new Date() - date) / 1000);
interval === 0
最后一个if
?
您可能想看看humanized_time_span:https : //github.com/layam/js_humanized_time_span
它与框架无关,并且可以完全自定义。
只需下载/包含脚本,然后您可以执行以下操作:
humanized_time_span("2011-05-11 12:00:00")
=> '3 hours ago'
humanized_time_span("2011-05-11 12:00:00", "2011-05-11 16:00:00)
=> '4 hours ago'
甚至这个:
var custom_date_formats = {
past: [
{ ceiling: 60, text: "less than a minute ago" },
{ ceiling: 86400, text: "$hours hours, $minutes minutes and $seconds seconds ago" },
{ ceiling: null, text: "$years years ago" }
],
future: [
{ ceiling: 60, text: "in less than a minute" },
{ ceiling: 86400, text: "in $hours hours, $minutes minutes and $seconds seconds time" },
{ ceiling: null, text: "in $years years" }
]
}
humanized_time_span("2010/09/10 10:00:00", "2010/09/10 10:00:05", custom_date_formats)
=> "less than a minute ago"
阅读文档以获取更多信息。
将上面的功能更改为
function timeSince(date) {
var seconds = Math.floor(((new Date().getTime()/1000) - date)),
interval = Math.floor(seconds / 31536000);
if (interval > 1) return interval + "y";
interval = Math.floor(seconds / 2592000);
if (interval > 1) return interval + "m";
interval = Math.floor(seconds / 86400);
if (interval >= 1) return interval + "d";
interval = Math.floor(seconds / 3600);
if (interval >= 1) return interval + "h";
interval = Math.floor(seconds / 60);
if (interval > 1) return interval + "m ";
return Math.floor(seconds) + "s";
}
否则,它将显示“ 75分钟”之类的信息(介于1到2个小时之间)。现在还假定输入日期为Unix时间戳。
许多可读性和跨浏览器兼容的代码:
正如@Travis给出的
var DURATION_IN_SECONDS = {
epochs: ['year', 'month', 'day', 'hour', 'minute'],
year: 31536000,
month: 2592000,
day: 86400,
hour: 3600,
minute: 60
};
function getDuration(seconds) {
var epoch, interval;
for (var i = 0; i < DURATION_IN_SECONDS.epochs.length; i++) {
epoch = DURATION_IN_SECONDS.epochs[i];
interval = Math.floor(seconds / DURATION_IN_SECONDS[epoch]);
if (interval >= 1) {
return {
interval: interval,
epoch: epoch
};
}
}
};
function timeSince(date) {
var seconds = Math.floor((new Date() - new Date(date)) / 1000);
var duration = getDuration(seconds);
var suffix = (duration.interval > 1 || duration.interval === 0) ? 's' : '';
return duration.interval + ' ' + duration.epoch + suffix;
};
alert(timeSince('2015-09-17T18:53:23'));
Lokely使用的较短版本:
const intervals = [
{ label: 'year', seconds: 31536000 },
{ label: 'month', seconds: 2592000 },
{ label: 'day', seconds: 86400 },
{ label: 'hour', seconds: 3600 },
{ label: 'minute', seconds: 60 },
{ label: 'second', seconds: 0 }
];
function timeSince(date) {
const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
const interval = intervals.find(i => i.seconds < seconds);
const count = Math.floor(seconds / interval.seconds);
return `${count} ${interval.label}${count !== 1 ? 's' : ''} ago`;
}
Infinity seconds ago
从现在开始,unix时间戳参数,
function timeSince(ts){
now = new Date();
ts = new Date(ts*1000);
var delta = now.getTime() - ts.getTime();
delta = delta/1000; //us to s
var ps, pm, ph, pd, min, hou, sec, days;
if(delta<=59){
ps = (delta>1) ? "s": "";
return delta+" second"+ps
}
if(delta>=60 && delta<=3599){
min = Math.floor(delta/60);
sec = delta-(min*60);
pm = (min>1) ? "s": "";
ps = (sec>1) ? "s": "";
return min+" minute"+pm+" "+sec+" second"+ps;
}
if(delta>=3600 && delta<=86399){
hou = Math.floor(delta/3600);
min = Math.floor((delta-(hou*3600))/60);
ph = (hou>1) ? "s": "";
pm = (min>1) ? "s": "";
return hou+" hour"+ph+" "+min+" minute"+pm;
}
if(delta>=86400){
days = Math.floor(delta/86400);
hou = Math.floor((delta-(days*86400))/60/60);
pd = (days>1) ? "s": "";
ph = (hou>1) ? "s": "";
return days+" day"+pd+" "+hou+" hour"+ph;
}
}
@ user1012181提供的代码的ES6版本
// Epochs
const epochs = [
['year', 31536000],
['month', 2592000],
['day', 86400],
['hour', 3600],
['minute', 60],
['second', 1]
];
// Get duration
const getDuration = (timeAgoInSeconds) => {
for (let [name, seconds] of epochs) {
const interval = Math.floor(timeAgoInSeconds / seconds);
if (interval >= 1) {
return {
interval: interval,
epoch: name
};
}
}
};
// Calculate
const timeAgo = (date) => {
const timeAgoInSeconds = Math.floor((new Date() - new Date(date)) / 1000);
const {interval, epoch} = getDuration(timeAgoInSeconds);
const suffix = interval === 1 ? '' : 's';
return `${interval} ${epoch}${suffix} ago`;
};
使用@ ibe-vanmeenen建议进行编辑。(谢谢 !)
简单易读的版本:
const NOW = new Date()
const times = [["second", 1], ["minute", 60], ["hour", 3600], ["day", 86400], ["week", 604800], ["month", 2592000], ["year", 31536000]]
function timeAgo(date) {
var diff = Math.round((NOW - date) / 1000)
for (var t = 0; t < times.length; t++) {
if (diff < times[t][1]) {
if (t == 0) {
return "Just now"
} else {
diff = Math.round(diff / times[t - 1][1])
return diff + " " + times[t - 1][0] + (diff == 1?" ago":"s ago")
}
}
}
}
我用js和python编写了一个,用在两个项目中,非常好又简单:一个简单的库(不到2kb)用于格式化带*** time ago
语句的日期。
简单,小巧,易于使用且经过良好测试。
npm install timeago.js
import timeago from 'timeago.js'; // or use script tag
使用api format
。
样品:
var timeagoIns = timeago();
timeagoIns .format('2016-06-12');
您也可以实时渲染。
var timeagoIns = timeago();
timeagoIns.render(document.querySelectorAll('time'));
import { format, render, cancel, register } from 'timeago.js';
尽管这个问题是很久以前提出的,但希望能写出这个答案对大家有所帮助。
传递您要开始计算的日期。使用moment().fromNow()
的momentjs:(查看更多信息点击这里)
getRelativeTime(date) {
const d = new Date(date * 1000);
return moment(d).fromNow();
}
如果您想更改从现在开始的日期提供的信息,请写下您的自定义相对时间。
例如,在我自己的情况下,我想打印'one month ago'
而不是'a month ago'
(由moment(d).fromNow()提供)。在这种情况下,您可以编写以下内容。
moment.updateLocale('en', {
relativeTime: {
future: 'in %s',
past: '%s ago',
s: 'a few seconds',
ss: '%d seconds',
m: '1 m',
mm: '%d minutes',
h: '1 h',
hh: '%d hours',
d: '1 d',
dd: '%d days',
M: '1 month',
MM: '%d months',
y: '1 y',
yy: '%d years'
}
});
注意:我在Agular 6中编写了项目代码
也可以使用dayjs relativeTime插件解决此问题。
import * as dayjs from 'dayjs';
import * as relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
dayjs(dayjs('1990')).fromNow(); // x years ago
这应该正确处理任何有效的时间戳,包括Date.now(),单数形式和将来的日期。我花了几个月的时间,但这些应该很容易添加。我试图使它尽可能地可读。
function getTimeInterval(date) {
let seconds = Math.floor((Date.now() - date) / 1000);
let unit = "second";
let direction = "ago";
if (seconds < 0) {
seconds = -seconds;
direction = "from now";
}
let value = seconds;
if (seconds >= 31536000) {
value = Math.floor(seconds / 31536000);
unit = "year";
} else if (seconds >= 86400) {
value = Math.floor(seconds / 86400);
unit = "day";
} else if (seconds >= 3600) {
value = Math.floor(seconds / 3600);
unit = "hour";
} else if (seconds >= 60) {
value = Math.floor(seconds / 60);
unit = "minute";
}
if (value != 1)
unit = unit + "s";
return value + " " + unit + " " + direction;
}
console.log(getTimeInterval(Date.now())); // 0 seconds ago
console.log(getTimeInterval(Date.now() + 1000)); // 1 second from now
console.log(getTimeInterval(Date.now() - 1000)); // 1 second ago
console.log(getTimeInterval(Date.now() + 60000)); // 1 minute from now
console.log(getTimeInterval(Date.now() - 120000)); // 2 minutes ago
console.log(getTimeInterval(Date.now() + 120000)); // 2 minutes from now
console.log(getTimeInterval(Date.now() + 3600000)); // 1 hour from now
console.log(getTimeInterval(Date.now() + 360000000000)); // 11 years from now
console.log(getTimeInterval(0)); // 49 years ago
我已经修改了Sky Sanders的版本。Math.floor(...)操作在if块中求值
var timeSince = function(date) {
var seconds = Math.floor((new Date() - date) / 1000);
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
if (seconds < 5){
return "just now";
}else if (seconds < 60){
return seconds + " seconds ago";
}
else if (seconds < 3600) {
minutes = Math.floor(seconds/60)
if(minutes > 1)
return minutes + " minutes ago";
else
return "1 minute ago";
}
else if (seconds < 86400) {
hours = Math.floor(seconds/3600)
if(hours > 1)
return hours + " hours ago";
else
return "1 hour ago";
}
//2 days and no more
else if (seconds < 172800) {
days = Math.floor(seconds/86400)
if(days > 1)
return days + " days ago";
else
return "1 day ago";
}
else{
//return new Date(time).toLocaleDateString();
return date.getDate().toString() + " " + months[date.getMonth()] + ", " + date.getFullYear();
}
}
return days + "1 day ago";
应该有return "1 day ago";
function dateToHowManyAgo(stringDate){
var currDate = new Date();
var diffMs=currDate.getTime() - new Date(stringDate).getTime();
var sec=diffMs/1000;
if(sec<60)
return parseInt(sec)+' second'+(parseInt(sec)>1?'s':'')+' ago';
var min=sec/60;
if(min<60)
return parseInt(min)+' minute'+(parseInt(min)>1?'s':'')+' ago';
var h=min/60;
if(h<24)
return parseInt(h)+' hour'+(parseInt(h)>1?'s':'')+' ago';
var d=h/24;
if(d<30)
return parseInt(d)+' day'+(parseInt(d)>1?'s':'')+' ago';
var m=d/30;
if(m<12)
return parseInt(m)+' month'+(parseInt(m)>1?'s':'')+' ago';
var y=m/12;
return parseInt(y)+' year'+(parseInt(y)>1?'s':'')+' ago';
}
console.log(dateToHowManyAgo('2019-11-07 19:17:06'));
function timeago(date) {
var seconds = Math.floor((new Date() - date) / 1000);
if(Math.round(seconds/(60*60*24*365.25)) >= 2) return Math.round(seconds/(60*60*24*365.25)) + " years ago";
else if(Math.round(seconds/(60*60*24*365.25)) >= 1) return "1 year ago";
else if(Math.round(seconds/(60*60*24*30.4)) >= 2) return Math.round(seconds/(60*60*24*30.4)) + " months ago";
else if(Math.round(seconds/(60*60*24*30.4)) >= 1) return "1 month ago";
else if(Math.round(seconds/(60*60*24*7)) >= 2) return Math.round(seconds/(60*60*24*7)) + " weeks ago";
else if(Math.round(seconds/(60*60*24*7)) >= 1) return "1 week ago";
else if(Math.round(seconds/(60*60*24)) >= 2) return Math.round(seconds/(60*60*24)) + " days ago";
else if(Math.round(seconds/(60*60*24)) >= 1) return "1 day ago";
else if(Math.round(seconds/(60*60)) >= 2) return Math.round(seconds/(60*60)) + " hours ago";
else if(Math.round(seconds/(60*60)) >= 1) return "1 hour ago";
else if(Math.round(seconds/60) >= 2) return Math.round(seconds/60) + " minutes ago";
else if(Math.round(seconds/60) >= 1) return "1 minute ago";
else if(seconds >= 2)return seconds + " seconds ago";
else return seconds + "1 second ago";
}
我的解决方案
(function(global){
const SECOND = 1;
const MINUTE = 60;
const HOUR = 3600;
const DAY = 86400;
const MONTH = 2629746;
const YEAR = 31556952;
const DECADE = 315569520;
global.timeAgo = function(date){
var now = new Date();
var diff = Math.round(( now - date ) / 1000);
var unit = '';
var num = 0;
var plural = false;
switch(true){
case diff <= 0:
return 'just now';
break;
case diff < MINUTE:
num = Math.round(diff / SECOND);
unit = 'sec';
plural = num > 1;
break;
case diff < HOUR:
num = Math.round(diff / MINUTE);
unit = 'min';
plural = num > 1;
break;
case diff < DAY:
num = Math.round(diff / HOUR);
unit = 'hour';
plural = num > 1;
break;
case diff < MONTH:
num = Math.round(diff / DAY);
unit = 'day';
plural = num > 1;
break;
case diff < YEAR:
num = Math.round(diff / MONTH);
unit = 'month';
plural = num > 1;
break;
case diff < DECADE:
num = Math.round(diff / YEAR);
unit = 'year';
plural = num > 1;
break;
default:
num = Math.round(diff / YEAR);
unit = 'year';
plural = num > 1;
}
var str = '';
if(num){
str += `${num} `;
}
str += `${unit}`;
if(plural){
str += 's';
}
str += ' ago';
return str;
}
})(window);
console.log(timeAgo(new Date()));
console.log(timeAgo(new Date('Jun 03 2018 15:12:19 GMT+0300 (FLE Daylight Time)')));
console.log(timeAgo(new Date('Jun 03 2018 13:12:19 GMT+0300 (FLE Daylight Time)')));
console.log(timeAgo(new Date('May 28 2018 13:12:19 GMT+0300 (FLE Daylight Time)')));
console.log(timeAgo(new Date('May 28 2017 13:12:19 GMT+0300 (FLE Daylight Time)')));
console.log(timeAgo(new Date('May 28 2000 13:12:19 GMT+0300 (FLE Daylight Time)')));
console.log(timeAgo(new Date('Sep 10 1994 13:12:19 GMT+0300 (FLE Daylight Time)')));
根据其他答案,我对此表示怀疑。
function timeSince(date) {
let minute = 60;
let hour = minute * 60;
let day = hour * 24;
let month = day * 30;
let year = day * 365;
let suffix = ' ago';
let elapsed = Math.floor((Date.now() - date) / 1000);
if (elapsed < minute) {
return 'just now';
}
// get an array in the form of [number, string]
let a = elapsed < hour && [Math.floor(elapsed / minute), 'minute'] ||
elapsed < day && [Math.floor(elapsed / hour), 'hour'] ||
elapsed < month && [Math.floor(elapsed / day), 'day'] ||
elapsed < year && [Math.floor(elapsed / month), 'month'] ||
[Math.floor(elapsed / year), 'year'];
// pluralise and append suffix
return a[0] + ' ' + a[1] + (a[0] === 1 ? '' : 's') + suffix;
}
我一直在寻找答案,并且几乎实施了其中一种解决方案,但是一位同事提醒我要检查该react-intl
库,因为我们已经在使用它。
因此,添加解决方案...在您使用react-intl
库的情况下,它们<FormattedRelative>
为此提供了一个组件。
https://github.com/yahoo/react-intl/wiki/Components#formattedrelative
这是我所做的(对象返回时间单位及其值):
function timeSince(post_date, reference)
{
var reference = reference ? new Date(reference) : new Date(),
diff = reference - new Date(post_date + ' GMT-0000'),
date = new Date(diff),
object = { unit: null, value: null };
if (diff < 86400000)
{
var secs = date.getSeconds(),
mins = date.getMinutes(),
hours = date.getHours(),
array = [ ['second', secs], ['minute', mins], ['hour', hours] ];
}
else
{
var days = date.getDate(),
weeks = Math.floor(days / 7),
months = date.getMonth(),
years = date.getFullYear() - 1970,
array = [ ['day', days], ['week', weeks], ['month', months], ['year', years] ];
}
for (var i = 0; i < array.length; i++)
{
array[i][0] += array[i][1] != 1 ? 's' : '';
object.unit = array[i][1] >= 1 ? array[i][0] : object.unit;
object.value = array[i][1] >= 1 ? array[i][1] : object.value;
}
return object;
}