使用jquery计算开始和结束时间的差异

时间：2016-10-02 01:02:06

标签： jquery html time

经过一番搜索。

我用.NET的一些代码片段做了这个。但它没有正常工作。

有人可以帮我查一下。我想要它做的第二件事是当我添加一个新行时，我必须再次进行相同的开始和结束时间 我知道它适用于（for）或i ++，但我不知道从哪里开始。

抱歉我的咒语。

感谢。 

<table class="tijd table">
    <thead>
        <tr>
        <th>#</th>
        <th>Datum</th>
        <th>Begin tijd</th>
        <th>Eind tijd</th>
        <th>totaal tijd</th>
        </tr>
    </thead>
    <tbody>
        <tr class="ts-row">
            <th scope="row" style="vertical-align: middle;">
                1
            </th>
            <td>
                <div class="input-group col-md-7">
                    <input type="text" class="form-control start_time" style="height: 30px;" name="1" placeholder="dd-mm-yyyy">
                    <span class="input-group-addon" data-toggle="date-selector">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </td>
            <td class="ts-range">
                <div class="input-group clockpicker col-md-5" data-placement="left" data-align="top" data-autoclose="true">
                    <input type="text" class="form-control end_time" style="height: 30px;">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </td>
            <td class="ts-range">
                <div class="input-group clockpicker col-md-5" data-placement="left" data-align="top" data-autoclose="true">
                    <input type="text" class="form-control total_time" style="height: 30px;">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </td>
            <td>
                <input readonly class="form-control aantaluren" style="height: 30px;">
            </td>
        </tr>
    </tbody>
</table> 


$(document).ready(function)){

    var a = $(".start_time").val(); //start_time = 1:30
    var b = $(".end_time").val();  //end_time = 3:00

    function TimeDiff(a,b) {

        var first = a.split(":")
        var second = b.split(":")

        var xx;
        var yy;

        if(parseInt(first[0]) < parseInt(second[0])){

            if(parseInt(first[1]) < parseInt(second[1])){

                yy = parseInt(first[1]) + 60 - parseInt(second[1]);
                xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0])

            }else{
                yy = parseInt(first[1]) - parseInt(second[1]);
                xx = parseInt(first[0]) + 24 - parseInt(second[0])
            }

        }else if(parseInt(first[0]) == parseInt(second[0])){

            if(parseInt(first[1]) < parseInt(second[1])){

                yy = parseInt(first[1]) + 60 - parseInt(second[1]);
                xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0])

            }else{
                yy = parseInt(first[1]) - parseInt(second[1]);
                xx = parseInt(first[0]) - parseInt(second[0])
            }

        }else{

            if(parseInt(first[1]) < parseInt(second[1])){

                yy = parseInt(first[1]) + 60 - parseInt(second[1]);
                xx = parseInt(first[0]) - 1 - parseInt(second[0])

            }else{
                yy = parseInt(first[1]) - parseInt(second[1]);
                xx = parseInt(first[0]) - parseInt(second[0])
            }
        }

        if(xx < 10)
        xx = "0" + xx

        if(yy < 10)
        yy = "0" + yy

        //alert(xx + ":" + yy)
        $('.total_time').val(xx + ":" + yy);  //total = 2:30
    }
});

1 个答案:

答案 0 :(得分：1)

我在您的JavaScript中进行了一些更改。您最好使用描述性名称命名变量。您必须将JavaScript代码放在脚本标记中。请阅读有关HTML和JavaScript的更多信息。

＆＃13;
＆＃13; 
var endTime = '6:30';
var startTime = '3:00';

function TimeDiff(endTime, startTime) {
  var first = endTime.split(":");
  var second = startTime.split(":");
  var xx;
  var yy;
  if (parseInt(first[0]) < parseInt(second[0])) {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - parseInt(second[0]);
    }
  } else if (parseInt(first[0]) == parseInt(second[0])) {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) - parseInt(second[0]);
    }
  } else {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) - parseInt(second[0]);
    }
  }
  if (xx < 10) {
    xx = "0" + xx;
  }

  if (yy < 10) {
    yy = "0" + yy;
  }

  return xx + ":" + yy;
}

alert(TimeDiff(endTime, startTime));
＆＃13;
＆＃13;
＆＃13;

您没有包含start_time，end_time和total_time类的元素。你必须对这些类有一些输入，然后用

来获取它们 
var startTime = $(".start_time").val();
var endTime = $(".end_time").val();
var timeDifference = TimeDiff(endTime, startTime);
$('.total_time').val(timeDifference);

＆＃13;
＆＃13; 
function TimeDiff(endTime, startTime) {
  var first = endTime.split(":");
  var second = startTime.split(":");
  var xx;
  var yy;
  if (parseInt(first[0]) < parseInt(second[0])) {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - parseInt(second[0]);
    }
  } else if (parseInt(first[0]) == parseInt(second[0])) {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) - parseInt(second[0]);
    }
  } else {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) - parseInt(second[0]);
    }
  }
  if (xx < 10) {
    xx = "0" + xx;
  }

  if (yy < 10) {
    yy = "0" + yy;
  }

  return xx + ":" + yy;
}
$('.submit').click(function(){
  
  var startTime = $(".start_time").val();
  var endTime = $(".end_time").val();
  $('.total_time').text(TimeDiff(endTime, startTime)); 
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <lable>Start time</lable>
  <input class="start_time"><br>
  <lable>End time</lable>
  <input class="end_time"><br>
  <input class="submit" type="submit" name="submit" value="Total Time">
</form>
 <br>
<span class="total_time"></span>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题