时间戳

首页 > 解决方案 > 在用户端根据白天和夜间在2个背景图像之间切换

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

问题描述

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

标签： javascripthtmltimebackgroundfrontend

解决方案

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

推荐阅读