在沒有Date對象的javascript中為時間添加數字

Question

我正在嘗試增加小時數。 我不使用Date對象，也不想要。

假設我從下拉菜單中選擇4小時：

<select class="form-control" id="hr-sel" name="hour" required>
  <option value="" selected>Decide Hour</option>
  <option value="4">4 |  550</option>
  <option value="6">6 | 750</option>
  <option value="9">9 | 1000</option>
  <option value="12">12 | 1200</option>
</select>

然后從輸入類型日期的下方選擇3:00。

<input class="form-control" placeholder="Pick Time" type="text" id="pick_time" name="pick" onfocus="(this.type='time')" onfocusout="(this.type='text')"; onchange="make_call();" onblur="setDropTime(hr,this.value);" required>

我希望下面的表格在7:00之前自動更新。

<input class="form-control" id="drop_time" name="drop" placeholder="Drop Time" type="text" onfocus="(this.type='time')" onfocusout="(this.type='text')"; required>

但是它將兩個值合並。 像4時3:00使我43。

下面是我嘗試過的JS函數。 請幫我。

function setDropTime(hours, pick_time) {
   var hours = document.forms["book"]["hr-sel"].value;
    sum = hours + pick_time;

  return sum;
}

請幫助我。

Answer 1

首先，我們需要解析顯示的項目。 如果我們在幾分鍾內完成數學運算，那么對我們來說最容易做到。

為了保持概述而不重復自己，創建一個可以將時間字符串解析為幾分鍾的函數

function parseTimeToMinutes(timeValue)
{
    //we split the input on the ':' symbol, so we get an arrray
    //with the hours and minutes (still as strings)
    var separated_values = timeValue.split(':');
    var num_hours = parseInt(separated_values[0]);
    var num_minutes = parseInt(separated_values[1]);

    //figure out the total number of minutes so we can do our math
    var sum_minutes = num_minutes + (num_hours * 60);
    return sum_minutes;
}

我們還需要一個函數來將分鍾數格式化回字符串。

function formatAsTime(numericValue)
{
    var restingMinutes = numericValue % 60;
    var hours = Math.floor(numericValue / 60);
    return hours + ":" + ("0" + restingMinutes).slice(-2);
}

然后您可以執行此操作

//please note : your code looks very confusing at this point,
//i'm not entirely sure this is how your form works.
//so your mileage may vary. use this as a guiding example : 
function setDropTime() {
     var originalTime = parseTimeToMinutes(document.getElementById('Pick Time').value);
     var timeToAdd = parseTimeToMinutes(document.getElementById('drop_time').value));

     var minutesTotal = originalTime + timeToAdd;

     return formatAsTime(minutesTotal);
}