在页面上通过表单提取当前时间,如果时间介于6:00-18:00,属于白天。根据时间,在页面上分别显示白天图片和黑夜图片
时间: 2023-06-18 09:05:45 浏览: 50
你可以使用 JavaScript 来实现这个功能。首先,在 HTML 页面中添加一个表单和两个图片元素,如下所示:
```html
<form>
<label>请输入当前时间:</label>
<input type="text" id="time">
<button type="button" onclick="showImage()">确定</button>
</form>
<img id="day-image" style="display: none;" src="day.png">
<img id="night-image" style="display: none;" src="night.png">
```
然后,编写 JavaScript 函数来提取时间并显示相应的图片:
```javascript
function showImage() {
var timeInput = document.getElementById("time").value; // 获取表单中输入的时间
var hour = parseInt(timeInput.split(":")[0]); // 提取小时数
var dayImage = document.getElementById("day-image");
var nightImage = document.getElementById("night-image");
if (hour >= 6 && hour < 18) { // 如果时间在 6:00-18:00 之间,显示白天图片
dayImage.style.display = "block";
nightImage.style.display = "none";
} else { // 否则显示黑夜图片
dayImage.style.display = "none";
nightImage.style.display = "block";
}
}
```
以上代码会根据输入的时间,判断当前是白天还是黑夜,并显示相应的图片。注意,在图片元素中设置了 `style="display: none;"`,这样初始时图片是隐藏的,只有在 JavaScript 中根据时间判断后才会显示出来。