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看起来如何？你有一个名为body的班级的div吗？或者你在寻找身体标签？如果您正在寻找身体标签，您可以像这样更改背景图像。

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

Answer 2

我建议你在<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');
}

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

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

而不是使用＆amp;＆amp;你应该检查一下||如果你想在第一个月到第五个月之间改变图像。你一定要看看：

JavaScript Comparison and Logical Operators！

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

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

Javascript Class Targeting

Ps：在这里工作小提琴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");

请检查您的所有条件。示例：月== 12和月＆lt; = 2 :(年中的月份不能是12且<2 你应该改变（月== 12 ||月==＆gt; 2）

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

5 个答案: