以分钟计算持续时间

时间:2014-02-04 04:58:03

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

我真的很难在几分钟内计算时间。我有两个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:15”,从第二个下午7:15选择,函数CalcTime()将得到“7:15 pm”,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";
}

1 个答案:

答案 0 :(得分:0)

如果您只是想将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点而结束时间是上午10点,那么您将获得相同的答案,就好像开始时间是AM和结束PM一样。如果您的值跨越午夜或超过24小时,您应该包括一个日期并使用Date对象,以便也考虑夏令时(上面没有,但这对于一年中的两天来说可能并不重要这可能是个问题。)