CODEWITHSUNDEEP
javascriptjquery
Nicole Davis
Nicole Davis

Reputation: 27

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

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

Upvotes: 0

Views: 1191

Answers (2)

anand
anand

Reputation: 1526

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
}

Upvotes: 1

David Hedlund
David Hedlund

Reputation: 129792

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

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

Upvotes: 6

Related Questions