我不想点击按钮后才会计算天数,我想输入完第二个date后就在页面上输出天数
时间: 2024-02-11 14:09:06 浏览: 27
可以使用 JavaScript 来实现在第二个日期输入框失去焦点时自动计算天数并输出到页面上。以下是一个简单的代码示例:
```html
<input type="date" id="checkin">
<input type="date" id="checkout" onblur="calculate()">
<p id="result"></p>
<script>
function calculate() {
// 获取输入框的值
var checkinDate = new Date(document.getElementById("checkin").value);
var checkoutDate = new Date(document.getElementById("checkout").value);
// 计算时间差(单位为毫秒)
var timeDiff = checkoutDate.getTime() - checkinDate.getTime();
// 将时间差转化为天数
var nightCount = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
// 输出结果
document.getElementById("result").innerHTML = "入住日期 " + checkinDate.toLocaleDateString() + ",退房日期 " + checkoutDate.toLocaleDateString() + ",共 " + nightCount + " 晚";
}
</script>
```
在上面的代码中,我们在第二个日期输入框中添加了 `onblur` 事件,当该输入框失去焦点时会自动执行 `calculate()` 函数。在函数中,我们获取了两个日期输入框的值,计算了时间差并将其转化为天数,最后将结果输出到页面上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)