JSFiddle - React, Tailwind, and code Playground
HTML
<input type="time" id="StartTime" placeholder="startTime" value="05:05 AM"/>
<input type="time" id="StopTime" placeholder="stopTime" value="05:08 AM"/>
<div class="OverTime"></div>
<div class="UpTime"></div>
<div class="DownTime"></div>
CSS
.OverTime{
border: 2px solid blue;
height:40px;
width:250px;
}
JavaScript
NowTime = new Date(); //Time Now
StartTime = new Date($('#StartTime').val());
StopTime = new Date($('#StopTime').val());
function fixIntegers(integer){
if (integer < 0)
integer = 0;
if (integer < 10)
return '0' + integer;
return '' + integer;
}
function Test( difference )
{
var toReturn = { days: 0, hours: 0, minutes: 0, seconds: 0 };
toReturn.seconds = fixIntegers(difference % 60);
difference = Math.floor(difference / 60);
toReturn.minutes = fixIntegers(difference % 60);
difference = Math.floor(difference / 60);
toReturn.hours = fixIntegers(difference % 24);
difference = Math.floor(difference / 24);
toReturn.days = fixIntegers(difference);
return toReturn;
}
function run()
{
var output = Test( Math.floor( ( NowTime - StopTime ) / 1000 ) );
$('.OverTime').html( output.days + ':' + output.hours + ':' + output.minutes + ':' + seconds);
}
setInterval(run, 1000)
/*=====COUNTS TIME UP TO THE FUTURE TIME=========
function CountUpTime(){
var RunUpTime = function () {
if(StartTime < NowTime && NowTime < StopTime){
var difference = Math.floor((NowTime - StartTime) / 1000);
}else if (StopTime < NowTime ){
var difference = Math.floor((StopTime - StartTime) / 1000);
}
$('.UpTime').html(days + ':' + hours + ':' + minutes + ':' + seconds);
}
UpTime = setInterval(RunUpTime, 1000);
}
//==========================COUNTS DOWN FROM THE STOP-TIME[FUTURE]========================
function CountDownTime(){
var RunDownTime = function () {
var difference = Math.floor((StopTime - NowTime) / 1000);
}
DownTime = setInterval(RunDownTime, 1000);
}
*/