更改HTML背景圖像根據一天中的時間使用JavaScript（使用多個圖像）？

所以我試圖改變我的網站的背景圖像與一天中的時間相關聯。更改HTML背景圖像根據一天中的時間使用JavaScript（使用多個圖像）？

Ex。現在是晚上，所以背景圖片會變成日落。今天早上，背景圖片將成爲日出。

但是，我想有功能從幾個圖片數組中隨機選擇。比如，我會有一個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的陣列？

來源

2016-01-21 Bryana

請發表您的代碼，讓我們看看你至今寫了。 –

感謝您提供的代碼。我的答案在下面:) –

@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>

我希望它能幫助;）

來源

2016-01-21 07:57:08

這就是你需要的。 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

來源

2016-01-21 07:55:17

更改HTML背景圖像根據一天中的時間使用JavaScript（使用多個圖像）？

回答

相關問題