javascript - 使用moment js计算两个日期之间时间出现的频率

Question

    $('#btn').click(function () {
        var now = moment();
        var later = moment().minutes(1440).seconds(00); /*just a sample future date*/

        var morning_break = moment().hours(10).minutes(00).seconds(00); /*10 am*/
        var afternoon_break = moment().hours(15).minutes(00).seconds(00); /*3pm*/
        var lunch_break = moment().hours(12).minutes(00).seconds(00); /*lunch*/

        var early_break_count = 0;
        var lunch_break_count = 0;
        var afternoon_break_count = 0;

        if(morning_break.isBetween(now, later)){
            early_break_count++;
        }
        if(lunch_break.isBetween(now, later)){
            lunch_break_count++;
        }
        if(afternoon_break.isBetween(now, later)){
            afternoon_break_count++;
        }

        alert(early_break_count);
        alert(lunch_break_count);
        alert(afternoon_break_count);
     });

我知道这只会计算第一天的特定休息时间。我的问题是当 future 日期超过2天时如何计算每次休息时间。例如3、6天左右。请注意，开始日期可能并不总是相同。可能是上午 11 点。 (在这种情况下，上午 10 点的休息时间将不计算在内)。

概念是..

在2天内，如果开始时间是2016年1月1日上午9点，结束时间是2016年1月3日下午6点，那么将会有

• early_break_count = 2;
• 午餐休息次数 = 2；
• afternoon_break_count = 2；

在2天内，如果开始时间是2016年1月1日上午11点，结束时间是2016年1月3日下午2点，那么将会有

• early_break_count = 1;
• 午餐休息次数 = 2；
• afternoon_break_count = 1；

我怎样才能做到这一点？请赐教我这一点。谢谢。请帮忙..

Answer 1

使用 while 循环，如下所示:

$('#btn').click(function() {
  var now = moment().hours(11).minutes(00).seconds(00);
  var later = now.clone().add({d: 1, h: 3});

  var morning_break = now.clone().hours(10); /*10 am*/
  var afternoon_break = now.clone().hours(15); /*3pm*/
  var lunch_break = now.clone().hours(12); /*lunch*/

  var early_break_count = 0;
  var lunch_break_count = 0;
  var afternoon_break_count = 0;

  do {
    if (morning_break.isBetween(now, later)) {
      early_break_count++;
    }
    if (lunch_break.isBetween(now, later)) {
      lunch_break_count++;
    }
    if (afternoon_break.isBetween(now, later)) {
      afternoon_break_count++;
    }
    
    morning_break.add(1, 'd');
    lunch_break.add(1, 'd');
    afternoon_break.add(1, 'd');
  } while (morning_break.diff(later) <= 0);

  alert('between ' + now.format('MMMM Do YYYY, h:mm:ss a') + ' and ' + later.format('MMMM Do YYYY, h:mm:ss a') + ':\n' +
        'morning breaks: ' + early_break_count + '\n' +
        'lunch breaks: ' + lunch_break_count + '\n' +
        'afternoon breaks: ' + afternoon_break_count);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<button type="button" id="btn">Click Me</button>

只是为了好玩，这里有一个更全面的程序:

$(function () {
  var $beginDate = $('#begindate');
  var $beginTime = $('#begintime');
  var $endDate   = $('#enddate');
  var $endTime   = $('#endtime');
  var $events    = $('#events');
  var $message   = $('#message');
  var $template  = $('#event-template');
  var dateRegExp = /^(\d{4})-(\d{2})-(\d{2})$/;
  var timeRegExp = /^(\d{2}):(\d{2})$/;
  var tempRegExp = /\{\{ *([^\}]+) *\}\}/g;
  
  function isInvalidDate(str) {
    return !(dateRegExp.test(str));
  }
  
  function isInvalidTime(str) {
    return !(timeRegExp.test(str));
  }
  
  function addEvent() {
    $events.append($($template.html()));
    
    schedule();
  }
  
  function removeEvent() {
    $(this).closest('div').remove();
    
    schedule();
  }
  
  function parseMoment(dateStr, timeStr) {
    var date = moment(dateStr);
    var time = timeStr.match(timeRegExp).slice(1);
    
    return date.hours(parseInt(time[0])).minutes(parseInt(time[1]));
  }
  
  function formatEvent(event) {
    return $('#count-template').html().replace(tempRegExp, function (match, field) {
      return event[field];
    });
  }
  
  function countEvents(beginDate, endDate, events) {
    events.sort(function (a, b) {
      return a.date.diff(b.date);
    });

    do {
      events.forEach(function (event) {
        if (event.date.isBetween(beginDate, endDate)) {
          event.count++;
        }

        event.date.add(1, 'd');
      });
    } while (events[0].date.diff(endDate) <= 0);

    return events.sort(function (a, b) {
      return a.order - b.order;
    }).reduce(function (template, event) {
      return template + formatEvent(event);
    }, '');
  }
  
  function schedule() {
    var beginDateStr = $beginDate.val();
    var beginTimeStr = $beginTime.val();
    var endDateStr   = $endDate.val();
    var endTimeStr   = $endTime.val();

    var events = $('#events input').toArray().map(function (input) {
      return $(input).val();
    });
    
    if (isInvalidDate(beginDateStr)) {
      $message.text('Please select a begin date');
    } else if (isInvalidTime(beginTimeStr)) {
      $message.text('Please select a begin time');
    } else if (isInvalidDate(endDateStr)) {
      $message.text('Please select an end date');
    } else if (isInvalidTime(endTimeStr)) {
      $message.text('Please select an end time');
    } else if (events.length === 0) {
      $message.text('Please add a daily event');
    } else if (events.some(isInvalidTime)) {
      $message.text('Please select a time for each daily event');
    } else {
      var beginDate = parseMoment(beginDateStr, beginTimeStr);
      var endDate   = parseMoment(endDateStr, endTimeStr);
      
      events = events.map(function (timeStr, index) {
        return {
          order: index + 1,
          count: 0,
          date: parseMoment(beginDateStr, timeStr)
        };
      });
      
      var message = countEvents(beginDate, endDate, events);
      
      $message.html(message);
    }
  }

  $('body').on('change', schedule);
  
  $('#add').on('click', addEvent);
  $('#events').on('click', '.remove', removeEvent);
  
  schedule();
});

div {
  padding: 0 0.5em 0.5em 0;
}

label[for] {
  display: inline-block;
  width: 60px;
  text-align: right;
}

#events {
  counter-reset: event;
}

label.event::before {
  counter-increment: event;
  content: "Event " counter(event);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<script type="text/x-template" id="event-template">
  <div>
    <label class="event"></label>
    <input type="time" />
    <button type="button" class="remove">&times; Remove</button>
  </div>
</script>

<script type="text/x-template" id="count-template">
  <div>
    Event {{order}} occurs {{count}} times
  </div>
</script>

<div>
  <label for="begindate">Between </label>
  <input type="date" id="begindate" value="2016-07-26" />
  <input type="time" id="begintime" value="11:00" />
</div>
<div>
  <label for="enddate">and </label>
  <input type="date" id="enddate" value="2016-07-27" />
  <input type="time" id="endtime" value="14:00" />
</div>
<p id="message"></p>
<div id="events">
  <h3>Daily Events</h3>
  <div>
    <button type="button" id="add">Add a Daily Event</button>
  </div>
  <div>
    <label class="event"></label>
    <input type="time" value="10:00" />
    <button type="button" class="remove">&times; Remove</button>
  </div>
  <div>
    <label class="event"></label>
    <input type="time" value="12:00" />
    <button type="button" class="remove">&times; Remove</button>
  </div>
  <div>
    <label class="event"></label>
    <input type="time" value="15:00" />
    <button type="button" class="remove">&times; Remove</button>
  </div>
</div>