Question

我有一个网页，我希望根据用户的白天和黑夜时间更改背景图像。这可能吗？如果是这样，您可以举一个这样的JavaScript代码示例吗？如果不是，那么白天和晚上的时间取决于位置（城市），JS代码将如何显示？感谢您的任何建议。附言我不包含代码，因为网页背景具有用于图像背景的简单HTML代码。

Answer 1

我认为最简单的方法是获取用户的时区Getting the client's timezone in JavaScript，然后选择切换时间。说，晚上8:30。

Answer 2

比依靠时区更准确的替代方法是使用browser geolocation API定位用户并使用服务获取该位置的日出和日落

例如，通过诸如https://sunrise-sunset.org/api之类的API服务，或者通过使用php的sunset()和sunrise()函数的自己的服务器端实现。

Answer 3

var now = new Date();
if (now.getHours() > 6 && now.getHours() < 20) {
  document.body.className += " day";
} else {
  document.body.className += " night";
}

.day {
  background-image: url("https://images.pexels.com/photos/125457/pexels-photo-125457.jpeg?cs=srgb&dl=blue-sky-bright-clouds-125457.jpg&fm=jpg");
  background-size: 100%;
}
.night {
  background-image: url("https://media.treehugger.com/assets/images/2016/06/milkyway.jpg.860x0_q70_crop-scale.jpg");
  background-size: 100%;
}

这可以使用Javascript的Date object.获得时间。有2个CSS类，day和night将背景图像设置为白天图像或夜间图像。 javascript检查它是否在7 AM和7 PM之间。如果是，它将day类添加到主体，如果不是，则添加night类。如果您实际上想包含真实的日落和日出时间而不是硬编码时间，则可能必须使用一些API。

在用户端根据白天和黑夜在2个背景图像之间切换

3 个答案: