【问题标题】:How can I humanize this complete duration in moment.js / javascript如何在 moment.js / javascript 中人性化这个完整的持续时间
【发布时间】:2012-12-18 21:40:47
【问题描述】:

我为文件上传设置了“剩余时间”计数器。剩余持续时间被计算并转换为毫秒,如下所示:

var elapsedTime = e.timeStamp - timestarted;
var speed = e.loaded / elapsedTime;
var estimatedTotalTime = e.totalSize / speed;
var timeLeftInSeconds = (estimatedTotalTime - elapsedTime) / 1000;

然后我构建一个数组,我打算将它构建成一个人性化的字符串。数组如下:

var time = {
              years : Math.round(moment.duration(timeLeftInSeconds, 'milliseconds').years()),
              months : Math.round(moment.duration(timeLeftInSeconds, 'milliseconds').months()),
              days : Math.round(moment.duration(timeLeftInSeconds, 'milliseconds').days()),
              hours : Math.round(moment.duration(timeLeftInSeconds, 'milliseconds').hours()),
              minutes : Math.round(moment.duration(timeLeftInSeconds, 'milliseconds').minutes()),
              seconds : Math.round(moment.duration(timeLeftInSeconds, 'milliseconds').seconds())
};

这一切都很完美,如果我像这样输出这个数据的字符串表示:

  console.log(time.years + ' years, ' + time.months + ' months, ' + time.days + ' days, ' + time.hours + ' hours, '+ time.minutes + ' minutes, ' + time.seconds + ' seconds');

它返回一个漂亮的简单剩余时间流,如下所示:

0 years, 0 months, 0 days, 0 hours, 1 minutes, 7 seconds

我现在需要做的是人性化这个输出,以便根据剩余时间构建字符串。例如

  • 还剩 2 年零 3 个月
  • 还剩 1 小时 32 分 41 秒
  • 还剩 7 秒
  • 还剩 3 分 46 秒
  • 还剩 6 秒

等等……等等……

现在我知道 moment.js 具有自动人性化持续时间的能力,这对于单个值来说效果很好,但这可以有多个可能的值(小时/分钟/秒等)

如何使用 moment.js 或手动构建字符串来人性化这些数据?

提前致谢。

【问题讨论】:

    标签: javascript momentjs


    【解决方案1】:

    我最终对 date-fns 的formatDistanceToNow 感到满意。您可以添加该函数,而无需添加像 moment.js 这样的整个库

    【讨论】:

      【解决方案2】:

      你应该试试这个插件:moment-duration-format

      它的语法很方便:

      var moment = require('moment');
      require("moment-duration-format");
      moment.duration(32832, "seconds").format("h [hrs]: m [min]: s [sec]")
      // => 9 hrs: 7 min: 12 sec" 
      

      【讨论】:

        【解决方案3】:

        我的 HumanizeDuration.js 库听起来正是您想要的:

        humanizeDuration(1);         // "1 millisecond"
        humanizeDuration(3000);      // "3 seconds"
        humanizeDuration(2012);      // "2 seconds, 12 milliseconds"
        humanizeDuration(97320000);  // "1 day, 3 hours, 2 minutes"
        

        看起来我的回答有点晚了,但也许它会帮助其他人看到这个问题!

        【讨论】:

          【解决方案4】:

          我认为你最好的选择是这样的:

          function humanize(time){
              if(time.years   > 0){   return time.years   + ' years and '     + time.months   + ' months remaining';}
              if(time.months  > 0){   return time.months  + ' months and '    + time.days     + ' days remaining';}
              if(time.days    > 0){   return time.days    + ' days and '      + time.hours    + ' hours remaining';}
              if(time.hours   > 0){   return time.hours   + ' hours and '     + time.minutes  + ' minutes and ' + time.seconds + ' seconds remaining';}
              if(time.minutes > 0){   return time.minutes + ' minutes and '   + time.seconds  + ' seconds remaining';}
              if(time.seconds > 0){   return time.seconds + ' seconds remaining';}
              return "Time's up!";
          }
          

          或者,您可以使用此功能:

          function humanize(time){
              var o = '';
              for(key in time){
                  if(time[key] > 0){
                      if(o === ''){
                          o += time[key] + ' ' + key + ' ';
                      }else{
                          return o + 'and ' + time[key] + ' ' + key + ' remaining';
                      }
                  }
              }
              return o + 'remaining';
          }
          

          它返回 "x <time> and y <time> remaining",表示 2 个最大值。 (或者在最后一种情况下只有几秒钟。

          【讨论】:

          • 感谢 Cerberus,我想过做类似的事情(虽然在通过数组的循环中),但如果持续时间很长,例如 2 年,我只想返回年份,但对于较小的持续时间,我想返回几个(3 分 42 秒)。我希望 moment.js 已经处理了这个,但我想没有。
          • @gordyr:完全没问题:D
          • 对不起 Cerbrus,我刚刚意识到我最终使用的功能实际上是由 user1933818 在您将其编辑为答案之前发布的。我觉得他得到正确答案的功劳是公平的。希望你理解队友。干杯!
          • @gordyr:什么?那个东西是我自己写的!他将其发布在13:02:59。我上次在12:56:25 编辑了我的代码。那家伙公然抄袭了我的一半答案。他是在我上次编辑之后发布的。
          • @gordyr:另一个答案已被删除。
          猜你喜欢
          • 2012-07-03
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-10-27
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多