0

目前正在从事一个项目，我必须构建具有开始、结束时间和会议间隔的时间选择器。用户首先选择开始时间，例如早上 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/ 。如果有人可以帮助解决这个问题，请告诉我。

4

1 回答 1

2

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

  1. 我们把它分成整数
  2. 创建一个新的 Date 对象并将时间设置为 startTime
  3. 在几分钟内添加您的更改
  4. 然后根据需要提取新的小时/分钟和格式（我认为有办法通过 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;
}
于 2016-02-10T14:44:30.693 回答