使用JavaScript更改HTML背景图像，具体取决于一天中的时间（使用多个图像）？_Javascript_Html_Css_Background_Background Image

使用JavaScript更改HTML背景图像，具体取决于一天中的时间（使用多个图像）？

javascript html css

使用JavaScript更改HTML背景图像，具体取决于一天中的时间（使用多个图像）？,javascript,html,css,background,background-image,Javascript,Html,Css,Background,Background Image,所以我试图改变我网站的背景图像，使其与一天中的时间相关联现在是傍晚，所以背景图片会变成日落。现在是早上，背景图片是日出但是，我想让函数从几个图片数组中随机选择。例如，我将有一个3个晚上的数组，一个3个上午的数组，一个3个下午的数组，等等。根据一天中的时间，函数将从相关数组中随机选择一张图片，然后将该图片用作背景我不知道这是否可能，但我希望得到任何指导编辑： //基于时间的问候语 var today=新日期（）； var hourNow=today.getHours（）；问候语； var

所以我试图改变我网站的背景图像，使其与一天中的时间相关联

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

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

我不知道这是否可能，但我希望得到任何指导

编辑：

//基于时间的问候语
var today=新日期（）；
var hourNow=today.getHours（）；
问候语；
var风格；
如果（小时数>=18）{
问候语=‘晚上好’；
}否则，如果（小时数>=12）{
问候语=‘下午好’；
}否则如果（小时当前>0）{
问候语=‘早上好’；
}否则{
问候语=‘你好’；
}
文件。书写（“”+问候语+“”）；

上面没有任何图像数组，因为我真的不知道如何键入图像数组甚至文档。获取？

这就是您需要的

Date（）

将返回时间，

randOrd（）

将随机化类选择。刷新页面以查看效果。（或单击“反复运行代码段以查看效果”）希望这有帮助：）

函数randOrd（）{
return（Math.round（Math.random（））-0.3）；
}
$（文档）.ready（函数（）{
var today=新日期（）；
var hourNow=today.getHours（）；
var script=document.getElementById（'date'）；
如果（小时小于12）{
变量天数=['day1'，'day2'，'day3']；
天。排序（randOrd）；
$（'#包装器'）。每个（函数（i，val）{
$（此）.addClass（天[i]）；
script.outerHTML+='Morning'+Date（）；
});
} 
否则如果（hourNow>=12&&hourNow 17&&hourNow感谢您发布代码
看看这个，它是代码的一个扩展，向您展示了如何解决问题。当然，它只是为了给您一个领先的开始。它当然不是“生产代码”，但它是有效的：）
以下是运行代码：
    <!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>


//基于时间的问候语
var today=新日期（）；
var hourNow=today.getHours（）；
问候语；
var风格；
var时间；
如果（小时数>=18）{
timeOfDay=1；
}否则，如果（小时数>=12）{
时间=2；
}否则如果（小时当前>0）{
时间=3天；
}否则{
timeOfDay=0；
}
//随机化3张图片
var rnd=Math.floor（Math.random（）*（4-1）+1）；//返回一个介于1（包含）和4（排除）之间的随机数
开关（日期时间）{
案例1://晚上
问候语=‘晚上好’；
交换机（rnd）{
案例1：文件。写入（“”）；中断；
案例2：文件。写入（“”）；中断；
案例3：文件。写入（“”）；中断；
} 
打破
案例2://下午
问候语=‘下午好’；
交换机（rnd）{
案例1：文件。写入（“”）；中断；
案例2：文件。写入（“”）；中断；
案例3：文件。写入（“”）；中断；
} 
打破
案例0://上午
问候语=‘早上好’；
交换机（rnd）{
案例1：文件。写入（“”）；中断；
案例2：文件。写入（“”）；中断；
案例3：文件。写入（“”）；中断；
} 
打破
默认值：//Generic
问候语=‘你好’；
交换机（rnd）{
案例1：文件。写入（“”）；中断；
案例2：文件。写入（“”）；中断；
案例3：文件。写入（“”）；中断；
}
打破
} 
文件。书写（“”+问候语+“”）；

我希望它能有所帮助；）请发布您的代码，让我们看看您到目前为止写了什么。感谢您提供代码。我的答案如下：）@Bryana:您的问题解决了吗？
    <!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>