从开始到结束时间花几分钟的时间javascript NaN错误

Question

First off would like to mention, i have searched SO and couldnt find this specific question answered. There are post out there with this topic from where i got the code below and other places on google.

Issue: I am trying to get the exact minutes spent from a start and end timestamp. The issue lies in the fact that, i dont know how to separate the ":" in my timestamp which is causing a "NaN" error.

HTML page:

<input type="text" id="start_time">
<input type="text" id="end_time">
<input type="text" id="minutes_spent">
<input type="button" onclick="ce()">

Javascript:

function toSeconds(time_str) {
var parts = time_str.split(':');

return parseInt(parts[0]) * 3600
+
parseInt(parts[1]) * 60 + 
+
parseInt(parts[2]);

var a = document.getElementByID('start_time').value;
var b = document.getElementByID('end_time').value;

var difference = Math.abs(toSeconds(a) - toSeconds(b));

var result = [ Math.floor(difference / 3600), Math.floor((difference % 3600) / 60), difference % 60 ];

result = result.map(function(v) { return v < 10 ? '0' + v : v; }).join(':');

document.getElementByID('minutes_spent').value = result;
}

Answer 1

Where is the function ce() that your are invoking on onclick?

If you have pasted above code in one HTML file and loading it, then var a and vab b will be null. Because both the input fields will be empty at the time of loading and your JS will start executing (according to the code i can see above).

Logically it looks fine, try to create modular functions and execute the above code.

Answer 2

The following code will get user input for timestamps and give the difference jsFiddle

HTML:

START:<input id="start_time" type="text"/>format "HH:MM:SS"<br/><br/>
END:<input id="end_time" type="text"/>format "HH:MM:SS"<br/><br/>
<input type="button" id="diff" onclick="getDiff()" value="Calc"/>
<br/><br/>
Hours:<input id="time_spent_hours" type="text" size="3"/>&nbsp;&nbsp;
Minutes:<input id="time_spent_mins" type="text" size="2"/>&nbsp;&nbsp;
Seconds:<input id="time_spent_secs" type="text" size="2"/>

JS:

function getDiff() {
 var ts1 = document.getElementById('start_time').value;
 var ts2 = document.getElementById('end_time').value;
 if((/[0-9]?[0-9]:[0-9]?[0-9]:[0-9]?[0-9]/).test(ts1)==false) {
   alert("start time format is wrong");
   return;
 }
 if((/[0-9]?[0-9]:[0-9]?[0-9]:[0-9]?[0-9]/).test(ts2)==false) {
   alert("end time format is wrong");
   return;
 }
 var arr1 = ts1.split(":");
 var arr2 = ts2.split(":");
 var hrs = "0";
 var mins = "0";
 var secs = "0";
 var secs = (parseInt(arr2[0])*60*60 + parseInt(arr2[1])*60 + parseInt(arr2[2])) - (parseInt(arr1[0])*60*60 + parseInt(arr1[1])*60 + parseInt(arr1[2]));
 if(secs<0) {
   alert("start time is greater than end time");
   return;
 }
 if(secs>60) {
   mins = Math.round(secs/60);
   secs = secs%60;
   if(mins>60) {
     hrs = Math.round(mins/60);
     mins = mins%60;
   }
 }
 document.getElementById('time_spent_secs').value = secs;
 document.getElementById('time_spent_mins').value = mins;
 document.getElementById('time_spent_hours').value = hrs;
}