以分钟为单位计算持续时间答案

【问题标题】：Calculating Time duration in minutes以分钟为单位计算持续时间
【发布时间】：2014-02-27 22:27:53
【问题描述】：

我真的很努力地计算以分钟为单位的时间。我有两个 jquery 时间选择器下拉菜单。一个用开始时间表示，另一个用结束时间表示，我生成了一个自定义函数，它以分钟为单位计算从开始到结束的持续时间并显示在第三个文本框中。有人可以指导我在此功能中的错误之处，因为我的功能无法正常运行。

我的下拉菜单有这些值::

<ul class="ui-timepicker-list"><li>6:00am</li><li>6:15am</li><li>6:30am</li><li>6:45am</li><li>7:00am</li><li>7:15am</li><li>7:30am</li><li>7:45am</li><li class="">8:00am</li><li>8:15am</li><li>8:30am</li><li>8:45am</li><li>9:00am</li><li>9:15am</li><li>9:30am</li><li>9:45am</li><li class="ui-timepicker-selected">10:00am</li><li>10:15am</li><li>10:30am</li><li>10:45am</li><li>11:00am</li><li>11:15am</li><li>11:30am</li><li>11:45am</li><li>12:00pm</li><li>12:15pm</li><li>12:30pm</li><li>12:45pm</li><li>1:00pm</li><li>1:15pm</li><li>1:30pm</li><li>1:45pm</li><li>2:00pm</li><li>2:15pm</li><li>2:30pm</li><li>2:45pm</li><li>3:00pm</li><li>3:15pm</li><li>3:30pm</li><li>3:45pm</li><li>4:00pm</li><li>4:15pm</li><li>4:30pm</li><li>4:45pm</li><li>5:00pm</li><li>5:15pm</li><li>5:30pm</li><li>5:45pm</li><li>6:00pm</li><li>6:15pm</li><li>6:30pm</li><li>6:45pm</li><li>7:00pm</li><li>7:15pm</li><li>7:30pm</li><li>7:45pm</li><li>8:00pm</li><li>8:15pm</li><li>8:30pm</li><li>8:45pm</li><li>9:00pm</li><li>9:15pm</li><li>9:30pm</li><li>9:45pm</li><li>10:00pm</li><li>10:15pm</li><li>10:30pm</li><li>10:45pm</li><li>11:00pm</li></ul>

我将相同的内容传递给函数，例如如果从第一个下拉列表中选择“7:15pm”，从第二个下拉列表中选择“7:15am”，函数 CalcTime() 将获得“7:15pm”，7： 15am”在我传递的参数中。输出应该基于 AM 和 Pm，但我的函数只是减去 7.25-7.25 并导致 0 分钟，而正确的输出将是 720 分钟。Calcfunctions 将 7.15 转换为 7.25，7:00到 7 点、7:30 到 7.5 和 7:45 到 7.75

我使用的插件是:: http://jonthornton.github.io/jquery-timepicker/

  <link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
<script src="~/Content/jquery.timepicker.js"></script>

这是我的功能::: 这是两个控件：：

     <div class="span2" style="width: 75px; float: left; margin-right: 5px;">
                            <div class="input-control text">
                                Start Time
                                 @Html.TextBoxFor(m => m.StartTime1)
                            </div>
                        </div>
                        <div class="span2" style="width: 75px; float: left; margin-right: 5px;">
                            <div class="input-control text">
                                End Time
                              @Html.TextBoxFor(m => m.EndTime1)
                            </div>
                        </div>

Here they becomes Time picker
     $('#EndTime1').timepicker({
            step: 15,
            minTime: '6:00am',
            maxTime: '11:00pm',
        });
        $('#StartTime1').timepicker({
            step: 15,
            minTime: '6:00am',
            maxTime: '11:00pm',
        });


below are the on change event of the time pickers
      $('#StartTime1').on('changeTime', function () {
        var Start_Time = $(this).val();
        var End_Time = $('#EndTime1').val();
        Total_Time_Taken = CalcTime(Start_Time, End_Time);
        $("#TotalTime1").val(Total_Time_Taken);
    });

    $('#EndTime1').on('changeTime', function () {
        var End_Time = $(this).val();
        var Start_Time = $('#StartTime1').val();
        Total_Time_Taken = CalcTime(Start_Time, End_Time);
        $("#TotalTime1").val(Total_Time_Taken);
    });


     function CalcTime(Start_Time, End_Time) {
    restHalf = 0;
    total = 0;
    restHalfForEnd = 0;
    alert(Start_Time);
    alert(End_Time);
    var arrStart_time = Start_Time.split(':');
    var arrEnd_time = End_Time.split(':');
    if (arrStart_time[1].contains('a')) {
        var RightPortion = arrStart_time[1].split('a');
        restHalf = RightPortion[0];
    }
    else {
        var RightPortion = arrStart_time[1].split('p');
        restHalf = RightPortion[0];
    }
    if (restHalf == "30") {
        arrStart_time[0] = parseFloat(arrStart_time[0]) + parseFloat(0.5);
    }
    else if (restHalf == "15") {
        arrStart_time[0] = parseFloat(arrStart_time[0]) + parseFloat(0.25);
    }
    else if (restHalf == "45") {
        arrStart_time[0] = parseFloat(arrStart_time[0]) + parseFloat(0.75);
    }
    start = arrStart_time[0];
    if (arrEnd_time[1].contains('a')) {
        var RightPortionForEnd = arrEnd_time[1].split('a');
        restHalfForEnd = RightPortionForEnd[0];
    }
    else {
        var RightPortionForEnd = arrEnd_time[1].split('p');
        restHalfForEnd = RightPortionForEnd[0];
    }
    if (restHalfForEnd == "30") {
        arrEnd_time[0] = parseFloat(arrEnd_time[0]) + parseFloat(0.5);
    }
    else if (restHalfForEnd == "15") {
        arrEnd_time[0] = parseFloat(arrEnd_time[0]) + parseFloat(0.25);
    }
    else if (restHalf == "45") {
        arrStart_time[0] = parseFloat(arrStart_time[0]) + parseFloat(0.75);
    }
    end = arrEnd_time[0];
    alert(start); alert(end);
    if (parseFloat(start) > parseFloat(end)) {
        // alert("start is greater");
        total = parseFloat(start) - parseFloat(end);
    }
    else {
        //alert("end is greater");
        total = parseFloat(end) - parseFloat(start);
    }
    var TimeinMinutes = Math.abs(total * 60);
    return TimeinMinutes + "" + "Mins";
}

【问题讨论】：

你能举个例子吗？而且我没有使用上面的 Timepicker。让我更新一下我的问题。
您传递给 CalcTime 的字符串是什么格式的？
它可以有四种类型 Like:: 8:00am, 8:15am, 8:45am, 9:00am 8:00pm, 8:15pm, 8:45pm, 9:00pm 此外我的时间愤怒是从早上 6:00 到晚上 11:00 晚上
为什么这不起作用？ stackoverflow.com/questions/7709803/…

标签： javascript jquery asp.net asp.net-mvc-3 jquery-ui

【解决方案1】：

如果您只是想将 hh:mma 转换为分钟，然后从另一个中减去一个时间，类似以下的内容可能会有所帮助：

// Format is hh:mma
function timeToMins(s) {
  var s = s.split(':');
  return (s[0]*60) + (/p/i.test(s[1]) && s[0] < 12? 720 : 0) + parseInt(s[1],10);
}


function calcTime(s, e) {
  return Math.abs(timeToMins(e) - timeToMins(s));
}

以上假设两个时间都在同一天，因此如果开始时间是晚上 10:00，结束时间是上午 10:00，您将得到与开始时间是上午和结束时间相同的答案。如果您的值跨越午夜或超过 24 小时，您应该包含一个日期并使用 Date 对象，以便也考虑夏令时（以上没有，但这对于一年中的两天可能并不重要这可能是个问题）。

【讨论】：