Question

目前正在开展一个项目，我必须建立时间选择器，包括开始，结束时间和会议间隔。用户首先选择开始时间，例如上午7:15，然后下一步是选择会议间隔，范围从5分钟到60分钟，最后一步是应该根据选择的开始时间和会议间隔开始的结束时间。因此，如果用户选择上午7:30开始时间，并选择会议间隔50分钟，我的结束时间应该从早上8:20开始，上午9:10，上午10:00，...一直到下午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

基本上你可以看一下使用Date api。在下面的示例中，我们有一个startTime，可以是一个字符串，

我们将其拆分为整数
创建一个新的Date对象并将时间设置为startTime
在几分钟内添加您的更改
然后根据您的需要提取新的小时/分钟和格式（我认为有很多方法可以通过Date 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;
}

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

1 个答案: