在页面上通过表单提交当前时间,如果时间介于6:00-18:00,属于白天。根据时间,在页面上分别显示白天图片和黑夜图片
时间: 2023-06-18 13:05:41 浏览: 48
你可以使用 JavaScript 来实现这个功能。具体的代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间判断</title>
</head>
<body>
<form>
<label for="time">请输入当前时间:</label>
<input type="time" id="time" name="time">
<button type="button" onclick="checkTime()">提交</button>
</form>
<br>
<img id="image" src="" alt="">
<script>
function checkTime() {
const time = document.getElementById("time").value;
const hour = parseInt(time.substring(0, 2));
if (hour >= 6 && hour < 18) {
document.getElementById("image").src = "daytime.jpg";
} else {
document.getElementById("image").src = "nighttime.jpg";
}
}
</script>
</body>
</html>
```
在这个示例中,我们使用了一个表单来让用户输入当前时间。当用户点击提交按钮时,会触发 `checkTime()` 函数。这个函数首先获取用户输入的时间,并提取出其中的小时数。然后,根据小时数判断是白天还是黑夜,并在页面上显示相应的图片。注意,这里使用了 `parseInt()` 函数将时间字符串中的小时数转换为整数,以便进行比较。同时,我们需要在页面上提供两张不同的图片,分别用于显示白天和黑夜。在这个示例中,我们假设这两张图片的文件名分别为 `daytime.jpg` 和 `nighttime.jpg`,并将它们的路径设置为 `src` 属性的值。