如何计算两次之间浮动的小时数

Question

我有一个带有以下输入的表单：

<input type="time" name="morningS"/>
<input type="time" name="morningE"/>
<input type="time" name="AfternoonS"/>
<input type="time" name="AfternoonE"/>
<input type="text" name="total"/>

它们表示上午和下午的开始和结束时间我想做的是当我更改值并将其放入总输入时，自动计算float中的小时数，但我不知道如何在javascript中做到这一点，有人能帮忙吗？例如：

08:00 -> 10:00
13:00 -> 17:30
i want the output to be : 6.5

Answer 1

要从输入中获取数据，可以使用：

<input type="time" name="morningS"/>
<input type="time" name="morningE"/>

// morningS
document.getElementsByTagName("input")[0].value
// morningE
document.getElementsByTagName("input")[1].value

解决您的任务：

const morningS = "08:00"
const morningE = "13:00"
const AfternoonS = "10:00"
const AfternoonE = "17:30"
// Math
const diffHoursE = parseInt(AfternoonE.split(":")[0]) - parseInt(morningE.split(":")[0])
const diffHoursS = parseInt(AfternoonS.split(":")[0]) - parseInt(morningS.split(":")[0])
const diffMinutesE = parseInt(AfternoonE.split(":")[1]) - parseInt(morningE.split(":")[1])
const diffMinutesS = parseInt(AfternoonS.split(":")[1]) - parseInt(morningS.split(":")[1])
// Result
console.log(result = diffHoursE + diffHoursS + (diffMinutesE + diffMinutesS)/60) //6.5

Answer 2

在更改两个输入时，用这些元素调用这个函数来获取小时数(未测试的代码。我希望你能理解(。

function toHours(startTimeInputElement, endTimeInputElement) {
const startDateTime = startTimeInputElement.valueAsDate; 
if(startDateTime === null) {
return 'N/A';
}
const endDateTime = endTimeInputElement.valueAsDate; 
if(endDateTime === null) {
return 'N/A';
}
const differenceInMilliseconds = endDateTime.getTime() - startDateTime.getTime();
const differenceInHours = (differenceInMilliseconds/(1000 * 60 * 60)).toFixed(1);

return differenceInHours;

}

我使用了输入元素的valueAsDate属性。你可以在这里查看。还有一个CCD_ 2。这可能是有用的。试试看。