如何根据选定的开始时间和间隔获取结束时间？

Question

目前正在做一个项目，我必须在其中构建时间选择器，其中包含开始时间、结束时间和会议间隔。用户首先选择开始时间，例如 7:15am，然后下一步是选择会议间隔，范围从 5 分钟到 60 分钟，最后一步是根据选择的开始时间和会议间隔应该开始的结束时间。因此，如果用户选择 7:30am 作为开始时间，并选择会议间隔 50 分钟，我的结束时间应该从 8:20am、9:10am、10:00am、...开始到下午 5 点，但不超过。我当前的第一个问题是开始时间选择器，在 12 小时值旁边的下拉列表中我应该有 PM。我的代码给了我 AM。其次，如果我选择 5 分钟到 45 分钟的会议间隔，结束时间工作正常，但如果我选择 50 分钟或 55 分钟的会议长度，我无法在下拉列表中获得正确的结束时间值。

HTML:

<tr>
  <th>Start Time:</th>
  <td>
    <select name="stime" id="stime" />
        <option value="">--Select start time--</option>
    </select>
  </td>
  <br />

  <th>Meeting Length:</th>
  <td>
    <select name="meet_leng" id="meet_leng" onClick="setEndTime()">
       <option value="">--Select length--</option>
    </select>
  </td>
  <br />

  <th>End Time:</th>
  <td>
    <select name="etime" id="etime"/>
      <option value="">--Select end time--</option>
    </select>
  </td>
</tr>

JavaScript:

$(function() {
    for(var i=5; i <= 60; i+=5){
        $('#meet_leng').append('<option value="'+i+'">'+i+' min'+'</option>');
    }

    for(var i=700; i<= 1700; i+=15){
        var mins = i % 100;
        var hours = parseInt(i/100);

      if (mins > 45) {
             mins = 0;
             hours += 1;
             i = hours * 100;
        }

        var standardTime = ' AM';

        if(hours > 12){
             standardTime = ' PM';
             hours %= 13;
             hours++;
        }else{
             hours %= 13;
        }

    $('#stime').append('<option value="'+i+'">'+('0' + (hours)).slice(-2)+':'+('0' +mins).slice(-2)+standardTime+'</option>');
            }
});


function setEndTime(){
  var meetingLength = $('#meet_leng').val();
    var selectedTime = $('#stime').val();
    var sum = meetingLength + selectedTime;

    for(var i=sum; i <= 1700; i+=meetingLength){
        var mins = i % 100;
        var hours = parseInt(i/100);

    if (mins > 59) {
        var new_mins = mins % 60;
      hours += 1;
      i = (hours * 100) + new_mins;
    }

    $('#etime').append('<option value="'+i+'">'+i+'</option>');
    }
 }

这是我的工作示例：https://jsfiddle.net/dmilos89/rhuh6qum/22/。如果有人可以帮助解决这个问题，请告诉我。

Answer 1

基本上您可以考虑使用日期 api。在下面的示例中，我们有一个可以是字符串的 startTime，

我们把它分成整数
创建一个新的 Date 对象并将时间设置为 startTime
在几分钟内添加您的更改
然后取出新的 hour/minutes 并根据需要格式化（我认为有一些方法可以通过日期 api 获得此信息，但我认为举重的例子很好）

https://jsfiddle.net/2fpg3rte/1/

var time = new Date();
var startTime = "12:01 PM";
var timeChange = 60; //60 minutes
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');

time.setHours(parseInt(startHour));
time.setMinutes(parseInt(startMin));

$("#start").html(getFormattedTime(time));

//adjusted time
time.setMinutes(time.getMinutes() + timeChange);
$("#end").html(getFormattedTime(time));

function getFormattedTime(time) {
 var postfix = "AM";
 var hour = time.getHours();
 var min = time.getMinutes();

 //format hours
 if (hour > 12) {
   hour = (hour - 12 === 0) ? 12 : hour - 12;
   postfix = hour === 0 ? "AM" : "PM";
 }

 //format minutes
 min = (''+min).length > 1 ? min : '0' + min;
 return hour + ':' + min + ' ' + postfix;
}

如何根据选定的开始时间和间隔获取结束时间？

How to get End time based on selected Start time and Interval?

javascript

jquery

datetime-conversion