根据季节（当前日历月）更改 <body> 的背景图像（在 CSS 中）答案

【问题标题】：Changing a background image of <body> (in CSS) depending on the season (Current Calendar Month)根据季节（当前日历月）更改 <body> 的背景图像（在 CSS 中）
【发布时间】：2016-01-28 10:00:21
【问题描述】：

我想根据日期更改我的 HTML 背景，但我写的内容不能正常工作。我找不到任何适用的示例，我正在努力完成它。

我只想在新一季的开始通过改变我的 CSS 文件中使用的图像来改变我的 HTML 页面的背景。

JavaScript：

var d = new Date();
var Day = d.getDate();
var Month = d.getMonth();
if (Month == <3 && Month == 5) {
    document.background-image: url("springTree.jpg");
} else if (Month == < 6 && Month == > 8) {
    document.background-image: url("summerTree.jpg");
} else if (Month == < 9 && Month == > 11) {
    document.background-image: url("autumnTree.jpg");
} else (Month == 12 && Month == > 2) {
    document.background-image: url("winterTree.jpg");

CSS：

div.body {
  background-image: url("summertree.jpg");
    width: 640px;
    height: 1136px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

我不确定这是否可以用 JQuery 完成，但我愿意尝试任何东西。

如您所见，我显然不知道自己在做什么，我需要一些帮助，谢谢。

【问题讨论】：

发布完整的 javascript
在 javascript 中，月份是 0-11，而不是 1-12 - 也许这会导致您的问题？
我会为每个季节建议一个 css 类，然后你可以为 body 设置正确的类。 :-)
this:if (Month == <3 && Month == 5) { 对我来说看起来很奇怪......这行得通吗？您是否尝试过在您的条件下使用alert 以查看是否有任何触发？

标签： javascript html css comparison-operators

【解决方案1】：

我建议你在<html> 标签中使用类注入。 Javascript 代码将注入您想要的任何类（取决于位置（冬季与夏季）或当地时间（白天与夜晚））。并且您的 css 将具有背景（或相应的任何其他差异。

CSS：

.spring {background-image: url("springTree.jpg");}
.summer {background-image: url("summerTree.jpg");}
...

你还可以有其他不同：

.spring li a {color: green}
.winter li a {color: white}

您可以像这样从 javascript 设置类：

var html = document.getElementsByTagName('html')[0];
html.setAttribute('class', 'spring');

或者，如果您想要多个类注入（添加）您需要的类：

root.classList.add('evening');

根据你的条件：

var d = new Date();
var month = d.getMonth() + 1;
var html = document.getElementsByTagName('html')[0];
if (month >= 3 && month <= 5) {
    root.classList.add('spring');
} else if (month >= 6 && month <= 8) {
    root.classList.add('summer');
} else if (month >= 9 && month <= 11) {
    root.classList.add('autumn');
} else(month == 12 || month <= 2) {
    root.classList.add('winter');
}

【讨论】：

“设置从 JavaScript 注入类”是什么意思？那段代码是否应该包含在另一个从我的 HTML 调用的 JavaScript 文件中？另外，我是否只是从我的 html 文件中调用我的 CSS 文件和 Javascript 文件（使用您提供的代码）才能正常工作？无论如何感谢您的帮助。
@BOUYBOY，不管你的 js、css 内联在你的 html 中还是从其他文件链接。这部分代码向标签添加了一个类，所以如果你的 css 带有像 .spring 这样的前缀，那么从现在开始，这些 css 规则将起作用

【解决方案2】：

首先你应该看看如何在 JS 中进行比较。这个网站有一个很好的运营商列表和他们的工作：

JavaScript Comparison and Logical Operators

if(Month == < 3) 应该是 if(Month <= 3)。

并大声读出你的条件：

if (Month <= 3 && Month == 5)
if (Month <= 6 && Month >= 8)

月份可以小于或等于 3 而等于 5 吗？月份可以小于或等于 6 和大于或等于 8 吗？（不，可能不在这个宇宙中。）

至于交换图像，您的 html 看起来如何？你有一个名为body的类的div吗？还是您在寻找身体标签？如果您正在寻找 body 标签，您可以像这样更改背景图像。

document.body.style.backgroundImage = "url('springTree.png')";

【讨论】：

【解决方案3】：

试试下面的代码。

var d = new Date();
var Day = d.getDate();
// Below function returs 0 to 11. So we have added +1
var Month = d.getMonth() + 1;

// January, February, December
if (Month == 12 || Month <= 2) {
    document.body.style.backgroundImage = url("winterTree.jpg");
}
// March, April, May 
else if (Month >= 3 && Month <= 5) {
    document.body.style.backgroundImage = url("springTree.jpg");
}
// June, July, August
else if (Month >= 6 && Month <= 8) {
    document.body.style.backgroundImage = url("summerTree.jpg");
}
// September, October, November
else if (Month >= 9 && Month <= 11) {
    document.body.style.backgroundImage = url("autumnTree.jpg");
}

【讨论】：

【解决方案4】：

我对您编写 JavaScript 的方法感到惊讶。如果您可以查看JavaScript | MDN - Mozilla Developer Network 并检查如何定位类和覆盖样式，那就太好了。以下是您的解决方案。

var d = new Date();
var Day = d.getDate();
var Month = d.getMonth(); 

if (Month <= 3 || Month === 5) {
    document.getElementsByClassName('body')[0].style.background = "url('https://image.freepik.com/free-photo/my-cat-mimi_2568679.jpg')";
    console.log('1');
} else if (Month <= 6 || Month >= 8) {
    document.getElementsByClassName('body')[0].style.background = "url('https: //image.freepik.com/free-photo/clouds-above-the-volcano_426-19322758.jpg')";
    console.log('2');
} else if (Month <= 9 || Month >= 11) {
    document.getElementsByClassName('body')[0].style.background = "url('https://image.freepik.com/free-photo/my-cat-mimi_2568679.jpg')";
    console.log('3');
} else {
    document.getElementsByClassName('body')[0].style.background = "url('https: //image.freepik.com/free-photo/clouds-above-the-volcano_426-19322758.jpg')";
    console.log('4');
}

你应该检查 || 而不是使用 &&如果您想在第一个月和第五个月之间更改图像。你绝对应该看看：

JavaScript Comparison and Logical Operators!

因此你不应该写if(Month == < 3)它应该是if(Month <= 3)。

要更改或定位 HTML Dom 中的类，请查看此处

Javascript Class Targeting

Ps：在这里工作小提琴Change Pic depending using Dates

快乐学习。干杯:)

【讨论】：

【解决方案5】：

var d = new Date();
var Day = d.getDate();
var Month = d.getMonth();
if (Month == <3 && Month == 5) {
    document.background-image: url("springTree.jpg");
} else if (Month == < 6 && Month == > 8) {
    document.background-image: url("summerTree.jpg");
} else if (Month == < 9 && Month == > 11) {
    document.background-image: url("autumnTree.jpg");
} else (Month == 12 && Month == > 2) {
    document.background-image: url("winterTree.jpg");

请检查您的所有条件。示例： Month==12 and Month 2）

【讨论】：