在没有Date对象的javascript中为时间添加数字

Question

I am trying to add number of hours to time. I am not using Date object nor I want to.

Suppose I select 4 hours from below drop down:-

<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>

And select 3:00 from below from input type date.

<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>

I want below form to be auto-updated by 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>

But it merges both the values. Like 4 hours and 3:00 gets me 43.

Below is the JS function which I tried to. Kindly help me out.

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

  return sum;
}

Kindly Help me out please.

Answer 1

First, we'll need to parse the displayed item. It will be easiest for us to folow if we do our maths in minutes.

In order to keep overview, and not repeat ourselves, make a function that can parse the time strings into a number of minutes

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;
}

we will also need a function to format back from our number of minutes to a string.

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

you can then do this

//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);
}