Рассчитать разность времени начала и окончания с помощью jquery

Question

После некоторого поиска.

Я сделал это с некоторыми фрагментами кода из NET. Но он работает неправильно.

Может кто-нибудь, пожалуйста, проверьте это для меня. и вторая вещь, которую я хочу, чтобы это сделать, - это когда я добавляю новую строку, я должен повторять то же самое время начала и окончания.
Я знаю, что это работает с (для) или 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 
    } 
}); 

Answer 1

Я внесла некоторые изменения в свой JavaScript. Вы лучше называете свои переменные дескриптивными именами. Вы должны поместить код JavaScript в теги скриптов. Читайте больше о HTML и JavaScript.

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

У вас нет элементов с 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); 

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

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