Javascript：从下拉列表中获取所选值并根据开始时间和间隔计算结束时间

Question

情况：

我正在构建一个 Javascript 代码，它可以根据用户输入的开始时间（在输入字段中）和用户在下拉菜单中选择的时间间隔来计算结束时间。到目前为止，它可以自动获取输入域（“开始”）中输入的开始时间。即使用户输入了新的开始时间，也会同时更新。

问题：

1. 它无法从下拉菜单中获取选定的间隔值，它只显示“NaN:NaN AM”。我试图将代码从var timeChange = intervaltime.text; 修改为var timeChange = intervaltime.options[intervaltime.selectedIndex].text;，但仍然没有成功。如何让它从“间隔”中获取选定的值？

2. 虽然将intervaltime.text改为intervaltime.value可以显示结束时间，但计算出来的结束时间是完全错误的。更糟糕的是，当我不断输入新的开始时间时，新的结束时间是不合逻辑的。我不知道为什么它计算错误。

我可以知道我的代码有什么问题吗？谢谢！

链接（与以下代码相同）： https://jsfiddle.net/TKPSSS/jxp9uybt/

代码

HTML：

<input name="start" id="start" type="text" onInput="Value()">
<select id="interval">
  <option value="0">--Select start time--</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
  <option value="20">20</option>
  <option value="25">25</option>
  <option value="30">30</option>
  <option value="35">35</option>
  <option value="40">40</option>
  <option value="45">45</option>
  <option value="50">50</option>
  <option value="55">55</option>
  <option value="60">60</option>
</select>
<br />
<h1 id="showstart"></h1>
<h1 id="showend"></h1>

Javascript：

function Value() {
  var stime = document.getElementById("start");
  var startTime = stime.value;
  var time = new Date();
  var intervaltime = document.getElementById("interval");
  var timeChange = intervaltime.text;
  var startHour = startTime.split(':')[0];
  var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');

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

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

  //adjusted time
  time.setMinutes(time.getMinutes() + timeChange);
  $("#showend").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;
      postfix = "PM";
    }

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

Answer 1

使用这个：

function Value(){

    let startTime  = document.getElementById('start').value;
    let timeChange = parseInt(document.getElementById('interval').value);


    const time = validateTime(startTime);

    // Validating time
    if(time){

       const now = new Date();
       const newT = new Date();

       let hr = time.hrs;
       let mm = time.min;
       let amOrPm = time.aop;

       
       // showing time entered by user
       document.getElementById('showstart').textContent = `${ hr < 10? '0'+hr:hr}:${ mm < 10? '0'+mm:mm} ${amOrPm}`;

      
       // Converting to 24 hrs format
       if( hr === 12 && amOrPm === 'AM' ){
           hr = 0;
       }
       else if(amOrPm === 'PM' && hr < 12){
           hr += 12;
       }
      

       now.setHours(hr);
       now.setMinutes(mm + timeChange);
       now.setSeconds(0);

       hr = now.getHours();
       mm = now.getMinutes();


       // Converting back to 12 hours format
       if( hr === 0){
           hr = 12; 
           amOrPm = 'AM';
       }
       else if (hr === 12){
           amOrPm = 'PM';
       }
       else if (hr >= 13 && hr <= 23){
           hr -= 12;
           amOrPm = 'PM';
       }

       document.getElementById('showend').textContent = `${ hr < 10? '0'+hr:hr}:${ mm < 10? '0'+mm:mm} ${amOrPm}`;
    }

    else{
        showError();
    }

}

// validates time entered in 12hrs format
// and returns an object
function validateTime(time){

    const tString = time.match(/(\d{2}:\d{2})\s(AM|PM|am|pm){1}/);

    if(time!= "" && tString){
    
        hr = parseInt(tString[1].split(':')[0]);
        mm = parseInt(tString[1].split(':')[1]);
        amOrPm = tString[2].toUpperCase();
    
        if( (hr >=0 && hr <= 12) && (mm >= 0 && mm < 60) )
        {
            document.getElementById('start').style.background = "#b9ebcc";
            return {
                hrs: hr,
                min: mm,
                aop: amOrPm
            };
        }
        else{
            return false;
        }
    }
    else {
        return false;
    }
}

function showError(){
    document.getElementById('start').style.background = "#eb4559";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container, .time{
            margin: 20px;
        }
        .time{
            display: inline;            
        }
        input[type="text"]{
            padding: 6px;
            width: 60px;
            text-align: center;
        }
        #interval{
            padding: 6px;
            margin-left: 10px;
        }
    
    </style>
</head>
<body>

    <div class="container">
        <div class="time">
            <label for="start">Enter time (01:23 AM, 03:40 PM etc.)</label>
            <input name="start" id="start" type="text" oninput="Value()">
        </div>

        <div class="time">
            <label for="interval">Enter Interval</label>
            <select id="interval" onchange="Value()">
                <option value="0" selected disabled>Select start time</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="30">30</option>
                <option value="35">35</option>
                <option value="40">40</option>
                <option value="45">45</option>
                <option value="50">50</option>
                <option value="55">55</option>
                <option value="60">60</option>
            </select>
        </div>
    </div>
    
    <div class="container">
        <div>
            <h1>Start Time: <span id="showstart"></span></h1>
        </div>
        <div>
            <h1>End Time:  <span id="showend"></span></h1>
        </div>
    </div>
    
  
    <script src="ans1.js"></script>
</body>
</html>