用JS实现时间差并显示在画面上代码怎么写
时间: 2023-05-31 18:06:43 浏览: 45
以下是用JavaScript实现时间差并显示在画面上的示例代码:
HTML代码:
```
<p>开始时间:<input type="datetime-local" id="start-time"></p>
<p>结束时间:<input type="datetime-local" id="end-time"></p>
<p>时间差:<span id="time-diff"></span></p>
```
JavaScript代码:
```
// 获取开始时间和结束时间输入框
var startTimeInput = document.getElementById("start-time");
var endTimeInput = document.getElementById("end-time");
// 监听开始时间和结束时间输入框的值改变事件
startTimeInput.addEventListener("input", calculateTimeDiff);
endTimeInput.addEventListener("input", calculateTimeDiff);
// 计算时间差并显示在画面上
function calculateTimeDiff() {
var startTime = new Date(startTimeInput.value);
var endTime = new Date(endTimeInput.value);
var timeDiff = endTime.getTime() - startTime.getTime();
// 将时间差转换为小时、分钟和秒
var hours = Math.floor(timeDiff / 3600000);
var minutes = Math.floor((timeDiff % 3600000) / 60000);
var seconds = Math.floor((timeDiff % 60000) / 1000);
// 将时间差显示在画面上
var timeDiffSpan = document.getElementById("time-diff");
timeDiffSpan.textContent = hours + "小时 " + minutes + "分钟 " + seconds + "秒";
}
```
该代码会监听开始时间和结束时间输入框的值改变事件,每次输入框的值改变时,会重新计算时间差并将其显示在画面上。时间差以小时、分钟和秒的形式显示。