Как заменить изображение в зависимости от часа дня

Question

У меня есть код, который меняет цвет фона в зависимости от времени суток, ежечасно. Теперь я пытаюсь сделать то же самое с заменой источника изображения, но, похоже, не работает, Code также основан на часовом поясе компьютера, но я хотел бы сделать его основанным только на Барселоне, Испания.

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

Это очень креативная идея изменить фон на основе времени. Но устанавливаете ли вы все атрибут src на один и тот же рисунок?

Answer 2

Изменение .attr к .prop:

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

Другой вариант заключается в определении фоновых изображений в классах CSS, а затем просто переключать классы.