根据一天中的时间（使用多个图像）使用 JavaScript 更改 HTML 背景图像？

Question

所以我正在尝试更改我网站的背景图片以与一天中的时间相关联。

例如。现在是晚上，所以背景图片会变成日落。现在是早上，背景图片将是日出。

但是，我想让函数从多个图片数组中随机选择。例如，我会有一个包含 3 个晚上的数组、一个包含 3 个上午的数组、一个包含 3 个下午的数组等。根据一天中的时间，该函数将从相关数组中随机选择一张图片，然后将该图片用于背景。

我不知道这是否可行，但我将不胜感激任何指导。

编辑：

//Greeting based on time of day

var today = new Date();
var hourNow = today.getHours();
var greeting;
var style;

if(hourNow >= 18) {
    greeting = 'Good evening.';
} else if (hourNow >= 12) {
    greeting = 'Good afternoon.';
} else if (hourNow > 0) {
    greeting = 'Good morning.';
} else {
    greeting = 'Hello.';
}


document.write('<h1>' + greeting + '</h1>');

那里没有任何图像数组，因为我真的不知道如何输入图像数组甚至 document.get?。

Answer 1

这就是您所需要的。 Date() 将 return 时间，randOrd() 将随机选择 class。刷新页面查看效果。（或单击"Run the code snippet over and over again to see the effect"）希望对您有所帮助:)

function randOrd() {
  return (Math.round(Math.random()) - 0.3);
}

$(document).ready(function() {
  var today = new Date();
  var hourNow = today.getHours();
  var script = document.getElementById('date');
  
  if (hourNow < 12) {
  
    var days = ['day1', 'day2', 'day3'];
    days.sort(randOrd);
    $('#wrapper').each(function(i, val) {
      $(this).addClass(days[i]);
      script.outerHTML += '<h2>Morning</h2>' + Date();
    });
    
  } 
  
  else if (hourNow >= 12 && hourNow <= 17) {
  
    var noon = ['noon1', 'noon2', 'noon3'];
    noon.sort(randOrd);
    $('#wrapper').each(function(i, val) {
      $(this).addClass(noon[i]);
      script.outerHTML += '<h2>Afternoon</h2>' + Date();
    });
    
  } 
  
  else if (hourNow > 17 && hourNow <= 24) {
  
    var evening = ['evening1', 'evening2', 'evening3'];
    evening.sort(randOrd);
    $('#wrapper').each(function(i, val) {
      $(this).addClass(evening[i]);
      script.outerHTML += '<h2>Evening</h2>' + Date();
    });
    
  } 
  
  else /* the hour is not between 0 and 24, so something is wrong */ {
    alert("I'm not sure what time it is!");
  }
});

#wrapper {
  width: 200px;
  height: 200px;
  background-size: cover;
  display: inline-block;
  float: left;
  margin-right: 20px;
}

#date {
  display: inline-block;
  float: left;
}

.day1 {
  background: url(http://www.publicdomainpictures.net/pictures/30000/nahled/sunny-day.jpg) top center repeat-x #e0d0b7;
}

.day2 {
  background: url(http://ptb-uploads-prod.s3.amazonaws.com/blog/wp-content/uploads/2015/04/0d246de.jpg) top center repeat-x #e0d0b7;
}

.day3 {
  background: url(http://www.goodlightscraps.com/content/good-morning/good-morning-93.jpg) top center repeat-x #e0d0b7;
}

.evening1 {
  background: url(http://www.imgion.com/images/02/Good-evening-flying-bird.gif) top center repeat-x #887f70;
}

.evening2 {
  background: url(http://www.alltechguide.net/wp-content/uploads/2015/06/good-evening-sms-in-hindi.jpg) top center repeat-x #887f70;
}

.evening3 {
  background: url(http://www.db18.com/wp-content/uploads/2015/07/Loving-Good-Evening.jpg) top center repeat-x #887f70;
}

.noon1 {
  background: url(http://www.dilsecomments.com/graphics/Good-Afternoon-5677.jpg) top center repeat-x #887f70;
}

.noon2 {
  background: url(http://www.imgion.com/images/02/Sunflowers-good-afternoon.jpg) top center repeat-x #887f70;
}

.noon3 {
  background: url(http://www.dilsecomments.com/graphics/Good-Afternoon-5683.gif) top center repeat-x #887f70;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
  <div id="wrapper"></div>
  <div id="date"></div>
</body>

这里是FIDDLE

Answer 2

感谢您发布代码。

看看这个，它是您代码的扩展，向您展示了如何解决问题。当然，这只是为了让您抢先一步。它肯定不是 "production code"，但它有效 :)

这是功能代码：

    <!DOCTYPE html>
    <html>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
//Greeting based on time of day

var today = new Date();
var hourNow = today.getHours();
var greeting;
var style;

var timeOfDay;            

if(hourNow >= 18) {
    timeOfDay = 1;
} else if (hourNow >= 12) {
    timeOfDay = 2;
} else if (hourNow > 0) {
    timeOfDay = 3;
} else {
    timeOfDay = 0;
}

// Randomize 3 images            
var rnd = Math.floor(Math.random() * (4 - 1) + 1); // Returns a random number between 1 (inclusive) and 4 (exclusive)

switch (timeOfDay) {
    case 1: // Evening
        greeting = 'Good evening.';

        switch (rnd) {
            case 1: document.write('<img src="EveningImage1.jpg" />'); break;
            case 2: document.write('<img src="EveningImage2.jpg" />'); break;
            case 3: document.write('<img src="EveningImage1.jpg" />'); break;
        } 
        break;
    case 2: // Afternoon
        greeting = 'Good afternoon.';

        switch (rnd) {
            case 1: document.write('<img src="AfternoonImage1.jpg" />'); break;
            case 2: document.write('<img src="AfternoonImage2.jpg" />'); break;
            case 3: document.write('<img src="AfternoonImage1.jpg" />'); break;
        } 
        break;
    case 0: // Morning
        greeting = 'Good morning.';

        switch (rnd) {
            case 1: document.write('<img src="MorningImage1.jpg" />'); break;
            case 2: document.write('<img src="MorningImage2.jpg" />'); break;
            case 3: document.write('<img src="MorningImage1.jpg" />'); break;
        } 
        break;
    default: // Generic
        greeting = 'Hello.';

        switch (rnd) {
            case 1: document.write('<img src="GenericImage1.jpg" />'); break;
            case 2: document.write('<img src="GenericImage2.jpg" />'); break;
            case 3: document.write('<img src="GenericImage1.jpg" />'); break;
        }
        break;
} 

document.write('<h1>' + greeting + '</h1>');

        </script>
        <body>

        </body>
    </html>

希望对您有所帮助 ;)

根据一天中的时间（使用多个图像）使用 JavaScript 更改 HTML 背景图像？

Changing HTML Background Image Using JavaScript, depending on time of day (Using Multiple Images)?

html

javascript

css

background

background-image