JSFiddle - React, Tailwind, and code Playground
HTML
<input id="start" value="09:30:21"> <!-- 08.00 PM -->
<input id="end" value="09:30:17"> <!-- 09.30 AM -->
<input id="diff">
JavaScript
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
function hourDiff(start, end) {
start = start.split(":");
end = end.split(":");
var startDate = new Date(0, 0, 0, start[0], start[1], start[2]);
var endDate = new Date(0, 0, (start > end)?1:0 , end[0], end[1], end[2]);
var diff = endDate.getTime() - startDate.getTime();
var hours = Math.floor(diff / 1000 / 60 / 60);
diff -= hours * 1000 * 60 * 60;
var minutes = Math.floor(diff / 1000 / 60);
diff -= minutes * 1000 * 60;
var seconds = Math.floor(diff / 1000);
return (hours < 9 ? "0" : "") + hours + ":"
+ (minutes < 9 ? "0" : "") + minutes + ":"
+ (seconds < 9 ? "0" : "") + seconds;
//setTimeout(function(){hourDiff(start, end)},500);
}
document.getElementById("diff").value = hourDiff(start, end);