How to make image change every couple of defined hours based on time

252
November 26, 2016, at 12:16 PM

I tried this but it does not show any image. If you could explain how to make it work so that the image comes out at the specified times that would be great. I will be switching out the images so that each time period has a different image. Thank you so much!

setInterval(function () {
    var hours = new Date().getHours();
     $("#hours").html((hours < 10 ? "0" : "") + hours);
if (hours >= 5  && hours < 7) {
    if($("body").css("background-image").indexOf("night-sky-background.jpg")==-1){
              $("body").css("background-image", "images/night-sky-background.jpg");
          }
}
else if (hours >= 7 && hours < 8) {
    if($("body").css("background-image").indexOf("night-sky-background.jpg")==-1){
              $("body").css("background-image", "images/night-sky-background.jpg");
          }
}
else if (hours >=8 && hours < 9) {
    if($("body").css("background-image").indexOf("night-sky-background.jpg")==-1){
              $("body").css("background-image", "images/night-sky-background.jpg");
          }
}
else if (hours >=9 && hours < 11) {
    if($("body").css("background-image").indexOf("night-sky-background.jpg")==-1){
              $("body").css("background-image", "images/night-sky-background.jpg");
          }
}
else if (hours >=11 && hours < 14) {
    if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){
             $("body").css("background-image", "images/day-sky-background.jpg");
          }
}
else if (hours >=14 && hours < 18) {
    if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){
             $("body").css("background-image", "images/day-sky-background.jpg");
          }
}
else if (hours >=18 && hours < 22) {
    if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){
             $("body").css("background-image", "images/day-sky-background.jpg");
          }
}
else if (hours >=22 && hours < 24) {
    if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){
             $("body").css("background-image", "images/day-sky-background.jpg");
          }
}
else {
    if($("body").css("background-image").indexOf("day-sky-background.jpg")==-1){
             $("body").css("background-image", "images/day-sky-background.jpg");
          }
}
}, 1000);
Answer 1

background-image should be url(images/day-sky-background.jpg).

(You're missing the url( ... ))

Answer 2

You can simply use setInterval in conjuction with jQuery to attain your objective, no need to do if-else branching.

Edit:

function Background(){
    var imgs = [
            "images/day-sky-background1.jpg",
            "images/day-sky-background2.jpg",
            "images/day-sky-background3.jpg",
            "images/day-sky-background4.jpg",
            "images/day-sky-background5.jpg",
            "images/day-sky-background6.jpg",
            "images/day-sky-background7.jpg",
            "images/day-sky-background8.jpg",
            "images/day-sky-background9.jpg"
        ],
        len = imgs.length,
        idx = -1;
    setInterval(function(){
       var hours = new Date().getHours();
       $("#hours").html((hours < 10 ? "0" : "") + hours);
       idx = (idx+1)%len;
       if (hours >= 5  && hours < 7) {
           idx = 1;
       }else if (hours >= 7 && hours < 8) {
           idx = 2;
       }else if (hours >=8 && hours < 9) {
           idx = 3;
       }else if (hours >=9 && hours < 11) {
           idx = 4;
       }else if (hours >=11 && hours < 14) {
           idx = 5;
       }else if (hours >=14 && hours < 18) {
           idx = 6;
       }else if (hours >=18 && hours < 22) {
           idx = 7;
       }
       $("body").css("background", "#000 url("+imgs[idx]+")");
    }, 60*60*1000); //call every hour
}
READ ALSO
How to return value of ternary operator in PHP

How to return value of ternary operator in PHP

I have this php code in CodeIgniter and having this code in controller side but i can't get my actual result 'Available' which should come according to this ternary operator codeIn this code the result returns echo in the jquery code in view page

268
How to get values of input types by name

How to get values of input types by name

This is how i have written my values

400
Jquery print pdf contained in a string

Jquery print pdf contained in a string

I'm having some problems in the printing of a pdfUsing the following AJAX (that goes well, without any error) I retrive a string from print_invitee

345
How do I Hide Div&#39;s using If/else Statements on a JSP Page?

How do I Hide Div's using If/else Statements on a JSP Page?

So I have JSP function that handles a users login to the site by checking if they have entered the right name and password

271