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

那里没有任何图像阵列，因为我真的不知道如何输出图像数组甚至是文档。？

Answer 1

这就是你需要的。 Date()将返回时间，randOrd()会随机选择班级。刷新页面以查看效果。（或单击“反复运行代码片段以查看效果”）希望这会有所帮助：）

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

感谢您发布您的代码。

看看这个，它是代码的扩展，向您展示如何解决问题。当然，它只是为了给你一个良好的开端。它肯定不是＆＃34;生产代码＆＃34;，但它有效：）

这是正常运作的代码：

    <!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背景图像，具体取决于一天中的时间（使用多个图像）？

2 个答案: