Hello Reader's!,if you want get difference between two time, then I wrote this blog for you.It only contain JAVASCRIPT and HTML code.
First you need to create your HTML code where you will get your time difference
Put this HTML Code inside <body></body> tag
<body>
Hours: <select id="starttimehour" name="starttimehour" class="selectboxkl"></select>
Minute: <select id="starttimemin" name="starttimemin" class="selectboxkl"></select>
Hours: <select id="endtimehour" name="endtimehour" class="selectboxkl"></select>
Minute: <select id="endtimemin" name="endtimemin" class="selectboxkl"></select>
<input type="text" name="time1" id="elapsed1" class="timedifference" />Minutes
<input type="text" name="time2" id="elapsed2" class="timedifference" /> Hours:Minutes
</body>
if you done above code, now you need to create JavaScript code inside <head></head> tag, This JavaScript code work like a brain.
I have already mention comment inside the code for understanding how its working.
Put this code between <head></head> tag in your HTML File.
<script>
onload = function() {
var startHSelect = document.getElementById("starttimehour"); //Contain Start Hours data By ID
var startMSelect = document.getElementById("starttimemin"); //Contain End Minute data By ID
var endHSelect = document.getElementById("endtimehour"); //Contain End Hours data By ID
var endMSelect = document.getElementById("endtimemin"); //Contain End Minute data By ID
var elapsed1 = document.getElementById("elapsed1"); //It Will Show Minute
var elapsed2 = document.getElementById("elapsed2"); //it will Show Hours and minute
function populateSelect(menu, n){ //This function create the DropDown value
var i, opt;
for(i=0; i<n; i++)
{
opt = document.createElement('option');
opt.innerHTML = (i<=9) ? ('0'+i) : i;
opt.value = i;
menu.appendChild(opt);
}
}
populateSelect(startHSelect, 24); //Set The Value
populateSelect(startMSelect, 60);
populateSelect(endHSelect, 24);
populateSelect(endMSelect, 60);
function timeDifference(){ // Caculate the time diffrance between time
var startH = parseInt(startHSelect.value, 10); //The parseInt() function parses a string argument and returns an integer of the specified radix
var startM = parseInt(startMSelect.value, 10);
var endH = parseInt(endHSelect.value, 10);
var endM = parseInt(endMSelect.value, 10);
var hours = Number(endHSelect.value) - Number(startHSelect.value);
var mins = Number(endMSelect.value) - Number(startMSelect.value);
mins = mins + 60 * hours;
if(mins < 0 ) { mins += 24 * 60 } //if difference is negative, then assume carry-over to next day.
elapsed1.value = mins;
var m = mins%60;
var h = parseInt(mins/60);
elapsed2.value = h + ':' + ((m<=9) ? ('0'+m) : m);
}
startHSelect.onchange = startMSelect.onchange = endHSelect.onchange = endMSelect.onchange = timeDifference;
timeDifference();
}
</script>
Complete Code here
<html>
<head>
<style>
select.selectboxkl { width: 40px; }
input.timedifference { width: 40px; text-align:right; }
</style>
<script>
onload = function() {
var startHSelect = document.getElementById("starttimehour"); //Contain Start Hours data By ID
var startMSelect = document.getElementById("starttimemin"); //Contain End Minute data By ID
var endHSelect = document.getElementById("endtimehour"); //Contain End Hours data By ID
var endMSelect = document.getElementById("endtimemin"); //Contain End Minute data By ID
var elapsed1 = document.getElementById("elapsed1"); //It Will Show Minute
var elapsed2 = document.getElementById("elapsed2"); //it will Show Hours and minute
function populateSelect(menu, n){ //This function create the DropDown value
var i, opt;
for(i=0; i<n; i++)
{
opt = document.createElement('option');
opt.innerHTML = (i<=9) ? ('0'+i) : i;
opt.value = i;
menu.appendChild(opt);
}
}
populateSelect(startHSelect, 24); //Set The Value
populateSelect(startMSelect, 60);
populateSelect(endHSelect, 24);
populateSelect(endMSelect, 60);
function timeDifference(){ // Caculate the time diffrance between time
var startH = parseInt(startHSelect.value, 10); //The parseInt() function parses a string argument and returns an integer of the specified radix
var startM = parseInt(startMSelect.value, 10);
var endH = parseInt(endHSelect.value, 10);
var endM = parseInt(endMSelect.value, 10);
var hours = Number(endHSelect.value) - Number(startHSelect.value);
var mins = Number(endMSelect.value) - Number(startMSelect.value);
mins = mins + 60 * hours;
if(mins < 0 ) { mins += 24 * 60 } //if difference is negative, then assume carry-over to next day.
elapsed1.value = mins;
var m = mins%60;
var h = parseInt(mins/60);
elapsed2.value = h + ':' + ((m<=9) ? ('0'+m) : m);
}
startHSelect.onchange = startMSelect.onchange = endHSelect.onchange = endMSelect.onchange = timeDifference;
timeDifference();
}
</script>
</head>
<body>
Hours: <select id="starttimehour" name="starttimehour" class="selectboxkl"></select>
Minute: <select id="starttimemin" name="starttimemin" class="selectboxkl"></select>
Hours: <select id="endtimehour" name="endtimehour" class="selectboxkl"></select>
Minute: <select id="endtimemin" name="endtimemin" class="selectboxkl"></select>
<input type="text" name="time1" id="elapsed1" class="timedifference" />Minutes
<input type="text" name="time2" id="elapsed2" class="timedifference" /> Hours:Minutes
</body>
</html>
Download Result Screenshot below
0 Comment(s)