如何根据一天中的小时替换图像

Question

I have a code that changes the background color based on the time of the day, hourly. Now I'm trying to do the same replacing an image source but seems to be not working, Code is also based on computer timezone, but I would like to make it based only on Barcelona city, Spain.

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

And my HTML for the is

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

Any suggestion to understand it better and make it work? thanks in advance!

Answer 1

Change the .attr to .prop:

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

Another option is to define the background images in css classes, and then just switch classes.

Answer 2

This is very creative idea to change background based on the time. But are you setting all src attribute to the same picture?