CODEWITHSUNDEEP
javascriptcss
Dean Swainsen
Dean Swainsen

Reputation: 13

Change background image based on hour of day

i have a some code that should change the background based on the hour of day. This will be running all the time in my own home, so I need help getting it to work and to refresh every 5 minutes or so. How i think it should work is it'll take a look at what hour it is, follow some logic and then write out the next line as

Can you help me find out why it doesn't work and how to fix it? I'm new to coding, don't know a whole lot.

EDIT: I don't know what the error is, it just doesn't change the background, it stays white 

<script type="text/javascript">
    var now = new Date();
    var hours = now.getHours();

    //Place this script in your HTML heading section

    //1-2am
    if (hours >= 1 && hours < 3){
    document.write(<body background="11.png">);
    }
    //3-4am
    else if (hours >= 3 && hours < 5){
    document.write(<body background="12.png">);
    }
    //5-6am
    else if (hours >= 5 && hours < 7){
    document.write(<body background="1.png">);
    }
    //7-8am
    else if (hours >= 7 && hours < 9){
    document.write(<body background="2.png">);
    }
    //9-10am
    else if (hours >= 9 && hours < 11){
    document.write(<body background="3.png">);
    }
    //11-12pm
    else if (hours >= 11 && hours < 13){
    document.write(<body background="4.png">);
    }
    //1-2Pm
    else if (hours >= 13 || hours < 15){
    document.write(<body background="5.png">);
    }
    //3-4pm
    else if (hours >= 15 && hours < 17){
    document.write(<body background="6.png">);
    }
    //5-6pm
    else if (hours >= 17 && hours < 19){
    document.write(<body background="7.png">);
    }   
    //7-8 pm
    else if (hours >= 19 && hours < 21){
    document.write(<body background="9.png">);
    }       
    //10-12am
    else {
    document.write(<body background="10.png">);
    }
    </script>

Upvotes: 1

Views: 1726

Answers (2)

abbas-ak
abbas-ak

Reputation: 642

<script type="text/javascript">
function changeBg() {
    var now = new Date();
    var hours = now.getHours();

    //based on hours it will dynamically change the image
        //1.png, 2.png, ..., 23.png
        document.body.style.backgroundImage ="url('" + hours + ".png')"

 }
changeBg();
 setInterval(function(){ changeBg(); }, 300000); //300000 means 5 min
</script>

Upvotes: 1

kamoroso94
kamoroso94

Reputation: 1735

You can change the background dynamically. Notice the pattern with the times and corresponding image names. You can map one to the other to shorten your code by quite a large amount. Also, I would recommend not writing the body tag over and over again, rather change the body tag's CSS background.

Of course, this code would only execute once, so you need to call it at some fixed interval so that it will update on time. You can use setInterval for that. This function takes a callback function as the first argument and a time in milliseconds of how long you want the interval to be. Since the background only changes once every two hours, you can just execute the function maybe once a minute. One minute in milliseconds is 1 * 60 * 1000;

setInterval(function() {
    var now = new Date();
    var hours = now.getHours();
    var imgName = (Math.floor((hours + 23) / 2) + 10) % 12 + 1;

    //Place this script in your HTML heading section
    document.body.style.backgroundColor = "red";
    document.body.style.backgroundImage = imgName + ".png";
}, 60 * 1000);

Upvotes: 0

Related Questions