如何根據一天中的小時替換圖像

Question

我有一個代碼，可以根據一天中的時間（每小時）更改背景顏色。 現在，我嘗試執行相同的操作來替換圖像源，但似乎無法正常工作，代碼也基於計算機時區，但是我想僅基於西班牙巴塞羅那市創建它。

JAVASCRIPT

$(document).ready(function(){
var d = new Date();
var n = d.getHours();

//1-2am
if (n > 23 || n < 2) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#2e3348','color':'#FFF'});
 }

//2-3am
else if (n > 24 || n < 3) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//3-4am
else if (n > 1 || n < 4) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//4-5am
else if (n > 2 || n < 5) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//5-6am
else if (n > 3 || n < 6) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//6-7am
else if (n > 4 || n < 7) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//7-8am
else if (n > 5 || n < 8) {
 $("img#photo1").attr("src","images/head6.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//8-9am
else if (n > 6 || n < 9) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//9-10am
else if (n > 7 || n < 10) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//10-11am
else if (n > 8 || n < 11) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//11-12am
else if (n > 9 || n < 12) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//12-1pm
else if (n > 10 || n < 13) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//1-2pm
else if (n > 11 || n < 14) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//2-3pm
else if (n > 12 || n < 15) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//3-4pm
else if (n > 13 || n < 16) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//4-5pm
else if (n > 14 || n < 17) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//5-6pm
else if (n > 15 || n < 18) {
 $("img#photo1").attr("src","images/head4.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//6-7pm 
else if (n > 16 || n < 19) {
 $("img#photo1").attr("src","images/head.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//7-8pm 
else if (n > 17 || n < 20) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//8-9pm 
else if (n > 18 || n < 21) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//9-10pm 
else if (n > 19 || n < 22) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//10-11pm 
else if (n > 20 || n < 23) {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }

//11-12pm 
else {
 $("img#photo1").attr("src","images/head1.png");
 $('body').css({'background-color':'#5ca0d6','color':'#FFF'});
 }
});

我的HTML是

<img src="" id="photo1" />

有什么建議可以更好地理解它並使它起作用嗎？ 提前致謝！

Answer 1

將.attr更改為.prop：

 $("img#photo1").prop("src","images/head6.png");

另一個選擇是在CSS類中定義背景圖像，然后僅切換類。

Answer 2

這是一個非常有創意的想法，可以根據時間更改背景。 但是，您是否將所有src屬性都設置為同一張圖片？