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

Question

我想根据日期更改我的 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 完成，但我愿意尝试任何东西。

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

Answer 1

首先你应该看看如何在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 看起来如何？你有一个 div 和一个叫 body 的 class 吗？或者您正在寻找 body 标签？如果您正在寻找 body 标签，您可以像这样更改背景图片。

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

Answer 2

试试下面的代码。

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");
}

Answer 3

我建议您使用 class 注入 <html> 标签。 Javascript 代码将注入任何你想要的 class （取决于位置（冬季与夏季）或当地时间（白天与夜晚））。您的 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 设置 class：

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

或者如果你想要多个 classes 注入（添加）你需要的那个：

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');
}

Answer 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：在 Fiddle 工作 Change Pic depending using Dates

快乐学习。干杯:)

Answer 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 :( month in year can't is 12 and <2 你应该改变 (Month == 12 || Month == > 2)

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

Changing a background image of <body> (in CSS) depending on the season (Current Calendar Month)

html

javascript

css

comparison-operators