Question

我正试图弄清楚如何使用CSS和Javascript按季节更改我的网站背景。看起来应该很容易，但我只是没有得到它。这是我正在尝试的，哪些不起作用（当然，对吧？）：

<script>
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var total = month;

// Summer
if (total >= 6 && total <= 8)
{
var season = "summer.jpg";
}
// Autumn
else if (total >= 9 && total <= 11)
{
var season = "fall.jpg";
}
// Winter
else if (total == 12 || total == 1 || total == 2)
{
var season = "winter.jpg";
}
// Spring
else if (total >= 2 && total <= 6)
{
var season = "spring.jpg";
}
else
{
var season = "summer.jpg";
}
</script>

<style  type="text/css">

#maincontent{
position: fixed; 
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
top: 0px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background-image: url('season');  /*Note: I tried putting season in <scirpt>   tags too with no success */

</style>

Answer 1

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var total = month;
switch(total) {
  case (total >= 6 && total <= 8):
    var season = "summer.jpg";
    break;
  case (total >= 9 && total <= 11):
    var season = "fall.jpg";
    break;
  case (total == 12 || total == 1 || total == 2):
    var season = "winter.jpg";
    break;
   default:
    var season = "summer.jpg";
  }
 var output = "red url('" + season + "') no-repeat center center fixed";
 var content= document.getElementById('maincontent');

 content.style.background = output;

Answer 2

使用纯Javascript根据您的条件设置背景图像。作为参考，我已经添加了一个显示当前季节的文本。

请查看下面的代码。

＆＃13;

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var total = month;

console.log('currentTime: ', currentTime);
console.log('month: ', month);
console.log('total: ', total);

var myElement = document.querySelector("#maincontent");
var textSelector = function(divId) {
  var textElement = document.getElementById(divId);
  return textElement;
}


// Summer
if (total >= 6 && total <= 8)
{
var season = "summer.jpg";
myElement.style.backgroundImage = "url('http://placehold.it/500x500')";
  textSelector('seasonOne').innerHTML = 'Season (Summer)';
}
// Autumn
else if (total >= 9 && total <= 11)
{
var season = "fall.jpg";
myElement.style.backgroundImage = "url('http://placehold.it/500x500')";
  textSelector('seasonTwo').innerHTML = 'Season (Fall)';
}
// Winter
else if (total == 12 || total == 1 || total == 2)
{
var season = "winter.jpg";
  myElement.style.backgroundImage = "url('http://placehold.it/500x500')";
  textSelector('seasonThree').innerHTML = 'Season (Winter)';
}
// Spring
else if (total >= 2 && total <= 6)
{
var season = "spring.jpg";
  myElement.style.backgroundImage = "url('http://placehold.it/500x500')";
  textSelector('seasonThree').innerHTML = 'Season (Spring)';
}
else
{
var season = "summer.jpg";
  myElement.style.backgroundImage = "url('http://placehold.it/500x500')";
  textSelector('seasonThree').innerHTML = 'Season (Summer)';
}

＆＃13;

#maincontent {
  position: fixed; 
  left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
  top: 0px; /*Set top value to HeightOfTopFrameDiv*/
  right: 0;
  bottom: 0;
  overflow: auto; 
  background-image: url('season');
  background: #aaa;
}

.txt {
  padding: 10px 40px;
  font-weight: 700;
}

＆＃13;

<div id="maincontent">
  <div id="seasonOne" class="txt"></div>
  <div id="seasonTwo" class="txt"></div>
  <div id="seasonThree" class="txt"></div>
  <div id="seasonFour" class="txt"></div>
  <div id="seasonFive" class="txt"></div>
</div>

＆＃13;

希望这有帮助！

Answer 3

您可以使用jquery，

来实现此目的

在指定季节值之后，如下所示，

document.getElementById("maincontent").style.backgroundImage = "url(" + season + ")";

使用javascript，

Data = Model.where("date(now()) between from_date and to_date")

Answer 4

试试这个：

var main = document.getElementById('maincontent');
main.style.backgroundImage = "url(" + season + ")";

Answer 5

您应该设置内联样式...

var maincontent = document.getElementById("#maincontent");
var season = "summer";

if (condition) {
   season = "fall"
}

// list all your conditions

maincontent.style.backgroundImage = "url(" + season + ".jpg)";

Answer 6

可接受的答案switch语句实际上不起作用，这确实让我感到困扰和困惑，解决方案是使用'true'作为switch参数：

var currentTime = new Date();
var month = currentTime.getMonth() + 1;

switch(true) {
  case (month >= 6 && month <= 8):
    var season = "summer.jpg";
    break;
  case (month >= 9 && month <= 11):
    var season = "fall.jpg";
    break;
  case (month == 12 || month == 1 || month == 2):
    var season = "winter.jpg";
    break;
   default:
    var season = "summer.jpg";
  }

使用CSS和Javascript逐季更改背景

6 个答案: