如何在JavaScript中渲染两个时间戳的上下文差异?

时间:2022-07-16 21:29:31

Let's say I've got two strings in JavaScript:

假设我有两个JavaScript字符串:

var date1 = '2008-10-03T20:24Z'
var date2 = '2008-10-04T12:24Z'

How would I come to a result like so:

我如何得出这样的结果:

'4 weeks ago'

or

'in about 15 minutes'

(should support past and future).

(应该支持过去和未来)。

There are solutions out there for the past diffs, but I've yet to find one with support for future time diffs as well.

过去的困难是有解决办法的,但我还没有找到一个可以支持未来困难的办法。

These are the solutions I tried:

这些是我尝试过的解决方法:

John Resig's Pretty Date and Zach Leatherman's modification

John Resig的漂亮约会和Zach Leatherman的修改

Bonus points for a jQuery solution.

jQuery解决方案的额外好处。

2 个解决方案

#1


7  

Looking at the solutions you linked... it is actually as simple as my frivolous comment!

看看你链接的解决方案……其实就像我轻率的评论一样简单!

Here's a version of the Zach Leatherman code that prepends "In " for future dates for you. As you can see, the changes are very minor.

这是Zach Leatherman代码的一个版本,在未来的日期为你准备“In”。正如您所看到的,这些变化非常小。

  function humane_date(date_str){
      var time_formats = [
          [60, 'Just Now'],
          [90, '1 Minute'], // 60*1.5
          [3600, 'Minutes', 60], // 60*60, 60
          [5400, '1 Hour'], // 60*60*1.5
          [86400, 'Hours', 3600], // 60*60*24, 60*60
          [129600, '1 Day'], // 60*60*24*1.5
          [604800, 'Days', 86400], // 60*60*24*7, 60*60*24
          [907200, '1 Week'], // 60*60*24*7*1.5
          [2628000, 'Weeks', 604800], // 60*60*24*(365/12), 60*60*24*7
          [3942000, '1 Month'], // 60*60*24*(365/12)*1.5
          [31536000, 'Months', 2628000], // 60*60*24*365, 60*60*24*(365/12)
          [47304000, '1 Year'], // 60*60*24*365*1.5
          [3153600000, 'Years', 31536000], // 60*60*24*365*100, 60*60*24*365
          [4730400000, '1 Century'], // 60*60*24*365*100*1.5
      ];

      var time = ('' + date_str).replace(/-/g,"/").replace(/[TZ]/g," "),
          dt = new Date,
          seconds = ((dt - new Date(time) + (dt.getTimezoneOffset() * 60000)) / 1000),
          token = ' Ago',
          prepend = '',
          i = 0,
          format;

      if (seconds < 0) {
          seconds = Math.abs(seconds);
          token = '';
          prepend = 'In ';
      }

      while (format = time_formats[i++]) {
          if (seconds < format[0]) {
              if (format.length == 2) {
                  return (i>1?prepend:'') + format[1] + (i > 1 ? token : ''); // Conditional so we don't return Just Now Ago
              } else {
                  return prepend + Math.round(seconds / format[2]) + ' ' + format[1] + (i > 1 ? token : '');
              }
          }
      }

      // overflow for centuries
      if(seconds > 4730400000)
          return Math.round(seconds / 4730400000) + ' Centuries' + token;

      return date_str;
  };

#2


3  

Heh - I actually wrote a function to do this exact thing yesterday (and it's not on this computer so I'll just have to try to remember it)

我昨天写了一个函数来做这个(它不在这台电脑上,所以我得努力记住它)

I extended the Date prototype class, but this could quite easily just be put into a regular function.

我扩展了Date prototype类,但是这可以很容易地放到一个常规函数中。

Date.prototype.toRelativeTime = function(otherTime) {
    // if no parameter is passed, use the current date.
    if (otherTime == undefined) otherTime = new Date();

    var diff = Math.abs(this.getTime() - otherTime.getTime()) / 1000;

    var MIN = 60,        // some "constants" just 
        HOUR = 3600,     // for legibility
        DAY = 86400
    ;
    var out, temp;
    if (diff < MIN) {
        out = "Less than a minute";

    } else if (diff < 15 * MIN) {
        // less than fifteen minutes, show how many minutes
        temp = Math.round(diff / MIN);
        out = temp + " minute" + (temp == 1 ? "" : "s");
        // eg: 12 minutes
    } else if (diff < HOUR) {
        // less than an hour, round down to the nearest 5 minutes
        out = (Math.floor(diff / (5 * MIN)) * 5) + " minutes";
    } else if (diff < DAY) {
        // less than a day, just show hours
        temp = Math.round(diff / HOUR);
        out = temp + " hour" + (temp == 1 ? "" : "s");
    } else if (diff < 30 * DAY) {
        // show how many days ago
        temp = Math.round(diff / DAY);
        out = temp + " day" + (temp == 1 ? "" : "s");
    } else if (diff < 90 * DAY) {
        // more than 30 days, but less than 3 months, show the day and month
        return this.getDate() + " " + this.getShortMonth();  // see below
    } else {
        // more than three months difference, better show the year too
        return this.getDate() + " " + this.getShortMonth() + " " + this.getFullYear();
    }
    return out + (this.getTime() > otherTime.getTime() ? " from now" : " ago");

};

Date.prototype.getShortMonth = function() {
    return ["Jan", "Feb", "Mar",
            "Apr", "May", "Jun",
            "Jul", "Aug", "Sep",
            "Oct", "Nov", "Dec"][this.getMonth()];
};

// sample usage:
var x = new Date(2008, 9, 4, 17, 0, 0);
alert(x.toRelativeTime());    // 9 minutes from now

x = new Date(2008, 9, 4, 16, 45, 0, 0);
alert(x.toRelativeTime());    // 6 minutes ago

x = new Date(2008, 11, 1);    // 1 Dec

x = new Date(2009, 11, 1);    // 1 Dec 2009

#1


7  

Looking at the solutions you linked... it is actually as simple as my frivolous comment!

看看你链接的解决方案……其实就像我轻率的评论一样简单!

Here's a version of the Zach Leatherman code that prepends "In " for future dates for you. As you can see, the changes are very minor.

这是Zach Leatherman代码的一个版本,在未来的日期为你准备“In”。正如您所看到的,这些变化非常小。

  function humane_date(date_str){
      var time_formats = [
          [60, 'Just Now'],
          [90, '1 Minute'], // 60*1.5
          [3600, 'Minutes', 60], // 60*60, 60
          [5400, '1 Hour'], // 60*60*1.5
          [86400, 'Hours', 3600], // 60*60*24, 60*60
          [129600, '1 Day'], // 60*60*24*1.5
          [604800, 'Days', 86400], // 60*60*24*7, 60*60*24
          [907200, '1 Week'], // 60*60*24*7*1.5
          [2628000, 'Weeks', 604800], // 60*60*24*(365/12), 60*60*24*7
          [3942000, '1 Month'], // 60*60*24*(365/12)*1.5
          [31536000, 'Months', 2628000], // 60*60*24*365, 60*60*24*(365/12)
          [47304000, '1 Year'], // 60*60*24*365*1.5
          [3153600000, 'Years', 31536000], // 60*60*24*365*100, 60*60*24*365
          [4730400000, '1 Century'], // 60*60*24*365*100*1.5
      ];

      var time = ('' + date_str).replace(/-/g,"/").replace(/[TZ]/g," "),
          dt = new Date,
          seconds = ((dt - new Date(time) + (dt.getTimezoneOffset() * 60000)) / 1000),
          token = ' Ago',
          prepend = '',
          i = 0,
          format;

      if (seconds < 0) {
          seconds = Math.abs(seconds);
          token = '';
          prepend = 'In ';
      }

      while (format = time_formats[i++]) {
          if (seconds < format[0]) {
              if (format.length == 2) {
                  return (i>1?prepend:'') + format[1] + (i > 1 ? token : ''); // Conditional so we don't return Just Now Ago
              } else {
                  return prepend + Math.round(seconds / format[2]) + ' ' + format[1] + (i > 1 ? token : '');
              }
          }
      }

      // overflow for centuries
      if(seconds > 4730400000)
          return Math.round(seconds / 4730400000) + ' Centuries' + token;

      return date_str;
  };

#2


3  

Heh - I actually wrote a function to do this exact thing yesterday (and it's not on this computer so I'll just have to try to remember it)

我昨天写了一个函数来做这个(它不在这台电脑上,所以我得努力记住它)

I extended the Date prototype class, but this could quite easily just be put into a regular function.

我扩展了Date prototype类,但是这可以很容易地放到一个常规函数中。

Date.prototype.toRelativeTime = function(otherTime) {
    // if no parameter is passed, use the current date.
    if (otherTime == undefined) otherTime = new Date();

    var diff = Math.abs(this.getTime() - otherTime.getTime()) / 1000;

    var MIN = 60,        // some "constants" just 
        HOUR = 3600,     // for legibility
        DAY = 86400
    ;
    var out, temp;
    if (diff < MIN) {
        out = "Less than a minute";

    } else if (diff < 15 * MIN) {
        // less than fifteen minutes, show how many minutes
        temp = Math.round(diff / MIN);
        out = temp + " minute" + (temp == 1 ? "" : "s");
        // eg: 12 minutes
    } else if (diff < HOUR) {
        // less than an hour, round down to the nearest 5 minutes
        out = (Math.floor(diff / (5 * MIN)) * 5) + " minutes";
    } else if (diff < DAY) {
        // less than a day, just show hours
        temp = Math.round(diff / HOUR);
        out = temp + " hour" + (temp == 1 ? "" : "s");
    } else if (diff < 30 * DAY) {
        // show how many days ago
        temp = Math.round(diff / DAY);
        out = temp + " day" + (temp == 1 ? "" : "s");
    } else if (diff < 90 * DAY) {
        // more than 30 days, but less than 3 months, show the day and month
        return this.getDate() + " " + this.getShortMonth();  // see below
    } else {
        // more than three months difference, better show the year too
        return this.getDate() + " " + this.getShortMonth() + " " + this.getFullYear();
    }
    return out + (this.getTime() > otherTime.getTime() ? " from now" : " ago");

};

Date.prototype.getShortMonth = function() {
    return ["Jan", "Feb", "Mar",
            "Apr", "May", "Jun",
            "Jul", "Aug", "Sep",
            "Oct", "Nov", "Dec"][this.getMonth()];
};

// sample usage:
var x = new Date(2008, 9, 4, 17, 0, 0);
alert(x.toRelativeTime());    // 9 minutes from now

x = new Date(2008, 9, 4, 16, 45, 0, 0);
alert(x.toRelativeTime());    // 6 minutes ago

x = new Date(2008, 11, 1);    // 1 Dec

x = new Date(2009, 11, 1);    // 1 Dec 2009