2个网页时间选择框，分别要求选择起止时间。使用JavaScript监听两个时间选择框的change事件，选择完成后不需要点击其它按钮即可自动计算时间间隔。PHP代码

以下是一个示例，包含两个时间选择框和一个用于显示时间间隔的`<div>`元素。当用户选择起始时间和结束时间后，脚本会自动计算两个时间之间的时间间隔并显示在页面上。 ```html <!DOCTYPE html> <html> <head> <title>时间间隔计算器</title> </head> <body> <label for="start_time">起始时间：</label> <input type="datetime-local" id="start_time" name="start_time"><br><br> <label for="end_time">结束时间：</label> <input type="datetime-local" id="end_time" name="end_time"><br><br> <div id="interval"></div> <script> const startTimeInput = document.getElementById('start_time'); const endTimeInput = document.getElementById('end_time'); const intervalDiv = document.getElementById('interval'); startTimeInput.addEventListener('change', calculateInterval); endTimeInput.addEventListener('change', calculateInterval); function calculateInterval() { const startTime = new Date(startTimeInput.value).getTime(); const endTime = new Date(endTimeInput.value).getTime(); if(startTime && endTime) { const interval = Math.abs(endTime - startTime); const days = Math.floor(interval / (1000 * 60 * 60 * 24)); const hours = Math.floor((interval % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((interval % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((interval % (1000 * 60)) / 1000); intervalDiv.innerHTML = `时间间隔为：${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`; } else { intervalDiv.innerHTML = ''; } } </script> </body> </html> ``` 在上面的代码中，我们使用了`<input>`标签的`type="datetime-local"`属性来创建两个时间选择框，它们可以让用户方便地选择日期和时间。当用户选择起始时间和结束时间后，我们使用JavaScript监听两个时间选择框的`change`事件，然后使用`Date`对象将它们转换为JavaScript的日期对象，并计算两个时间之间的时间间隔。最后，我们将计算出的时间间隔显示在页面上。使用`change`事件可以确保时间间隔在用户选择时间后立即计算，并且不需要使用额外的计算按钮。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通