在用户端根据白天和黑夜切换2张背景图片

Question

我有一个网页，我想在那里的背景图像被改变取决于用户的日光和黑暗的时间。这个是可能的吗？如果是这样，你能给出一个这样的JavaScript代码的例子吗？如果不是，如果白天和晚上的时间取决于一个地点(城市)，JS代码看起来会是什么样子？谢谢你的建议。附注:我没有包括我的代码，因为网页背景有一个简单的HTML代码的图像背景。

Answer 1

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

无论是通过API服务，比如https://sunrise-sunset.org/api，还是通过你自己的服务器端实现，比如使用php的sunset()和sunrise()函数。

Answer 2

​

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.来获取时间有两个css类，day和night，它们将背景图像设置为白天图像或夜间图像。javascript检查时间是否在上午7点到下午7点之间如果是，它会将day类添加到正文中，如果不是，它会添加night类。如果你真的想包含真实的日落和日出，而不是硬编码的时间，那么你可能需要使用一些API。

Answer 3

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