JSFiddle - React, Tailwind, and code Playground
by cespinoza
HTML
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Ok</th>
</thead>
<tr>
<td>1</td>
<td>CCBB</td>
<td >231</td>
<td class='calc' title='10:57-11:06'>1</td>
</tr>
<tr>
<td>2</td>
<td>CCBB</td>
<td>342</td>
<td class='calc' title='13:01-14:53'>0</td>
</tr>
</table>
JavaScript
elements = document.getElementsByClassName('calc');
for(var i = 0; i < elements.length; i++) {
v = elements[i].title;
v = v.split('-');
totalTime = delTime(v[1],v[0]);
elements[i].title = 'Duration: ' + totalTime;
}
function delTime()
{
if (arguments.length < 2)
{
if (arguments.length == 1 && isFormattedDate(arguments[0])) return arguments[0];
else return false;
}
var time1Split, time2Split, totalHours, totalMinutes;
if (isFormattedDate(arguments[0])) var totalTime = arguments[0];
else return false;
for (var i = 1; i < arguments.length; i++)
{
// Add them up
time1Split = totalTime.split(':');
time2Split = arguments[i].split(':');
totalHours = parseInt(time1Split[0]) - parseInt(time2Split[0]);
totalMinutes = parseInt(time1Split[1]) - parseInt(time2Split[1]);
// If total minutes is more than 59, then convert to hours and minutes
if (totalMinutes > 59)
{
totalHours += Math.floor(totalMinutes / 60);
totalMinutes = totalMinutes % 60;
}
totalTime = totalHours + ':' + padWithZeros(totalMinutes);
}
return totalTime;
}
function isFormattedDate(date)
{
var splitDate = date.split(':');
if (splitDate.length == 2 && (parseInt(splitDate[0]) + '').length <= 2 && (parseInt(splitDate[1]) + '').length <= 2) return true;
else return false;
}
function padWithZeros(number)
{
var lengthOfNumber = (parseInt(number) + '').length;
if (lengthOfNumber == 2) return number;
else if (lengthOfNumber == 1) return '0' + number;
else if (lengthOfNumber == 0) return '00';
else return false;
}