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

【问题标题】：Switch between 2 background images based on daytime and nighttime at user's end在用户端根据白天和夜间在2个背景图像之间切换
【发布时间】：2018-07-25 12:37:54
【问题描述】：

我有一个网页，我希望根据用户的白天和黑夜时间更改背景图像。这可能吗？如果是这样，你能举一个这样的 JavaScript 代码的例子吗？如果不是，如果昼夜时间取决于位置（城市），JS 代码会是什么样子？感谢您的任何建议。附：我没有包括我的代码，因为网页背景有一个简单的图像背景 HTML 代码。

【问题讨论】：

请阅读stackoverflow.com/help/how-to-ask，了解关于 SO 的问题。请注意，Stackoverflow 不是编码服务，因此不太可能有人会不费吹灰之力地为您提供工作代码。

标签： javascript html time background frontend

【解决方案1】：

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

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

【讨论】：

这听起来更复杂，但这正是我想要的。谢谢摩羯座

【解决方案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. 获取时间。有 2 个 css 类，day 和 night，它们将背景图像设置为白天图像或夜间图像。 javascript 检查它是否在早上 7 点到晚上 7 点之间。如果是，它将day 类添加到正文中，如果不是，则添加night 类。如果您真的想包含真正的日落和日出而不是硬编码时间，那么您可能必须使用一些 API。

【讨论】：

酷。感谢 Aplet123 分享代码和解释。

【解决方案3】：

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

【讨论】：

我实际上没有考虑过这个选项 - 谢谢 :)