How Do I Change A Body Background Image Every Hour?

Question

For my web design class we were instructed to do a one week exercise where we figure out how to take a creative approach to a clock that tells the time and temperature. This class is graded on creativity, I am allowed and encouraged to use plugins.

For my idea I think it would be interesting to change the background of my site every hour to match with the corresponding time. I have multiple images of a flower blooming and closing that I think would be interesting to correspond with the time of day.

What should I do to take what I already have and make it so that I can change the background image every hour? Is it something that should correspond with my existing javascript plugin clock, or is it a separate implementation entirely? Thanks in advance!

I don't want the image to change after a set interval, I want certain times in the day to correspond with the background image.

body {
  background-color: black;
  margin-left: 5%;
  margin-right: 5%;
}

#txt {
  color: white;
  float: left;
  font-family: OpenSans;
  font-size: 90px;
  margin: 20px;
}

#weather {
  color: white;
  float: right;
  font-family: OpenSans;
  font-size: 40px;
  margin: 20px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Blooming Time And Temperature</title>
    <link href="css/format.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script>
    function startTime() {
  document.getElementById('txt').innerHTML =
    moment().format("hh:mm A");
  var t = setTimeout(startTime, 1000);
}
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
    <script>
      $(document).ready(function() {
        $.simpleWeather({
          location: 'Brooklyn, NY',
          woeid: '',
          unit: 'f',
          success: function(weather) {
            html = '<p>'+weather.temp+'&deg;'+weather.units.temp+'</p>';
            html += '<div id="city">'+weather.city+', '+weather.region+'</div>';

            $("#weather").html(html);
          },
          error: function(error) {
            $("#weather").html('<p>'+error+'</p>');
          }
        });
      });
    </script>
  </head>
  <body onload="startTime()">
    <div id="txt"></div>
    <div id="weather"></div>
  </body>
</html>

Possible duplicate of [Change image in HTML page every few seconds](http://stackoverflow.com/questions/13975891/change-image-in-html-page-every-few-seconds) — Turnip, Oct 17 '16 at 15:31
Pro-tip: you're including 2 different versions of jQuery. You should really only load one version when possible. — Mike Cluck, Oct 17 '16 at 15:32

score 2 · Answer 1 · answered Oct 17 '16 at 15:33

To keep this simple, you could setInterval(). Here's how it works: http://www.w3schools.com/jsref/met_win_setinterval.asp

What I would do is check the current time, then get the difference between now and the next hour (that is, if it was 10:30 and I wanted to know how much time was between 10:30 and 11), do a setTimeout() for that amount of time in milliseconds, and then call a function that begins the setInterval() function that will be called every hour.

Hope this helps!

Cashif Ilyas · Accepted Answer · 2016-10-18T13:58:31.187

2

You need to get hour of the day on hourly basis. According to the hour, you can change background using jQuery:

$(document).ready(function() {

    setInterval(function(){
        var hour = new Date().getHours();
        if(hour > 7 && hour <= 12)
        {
           // It's morning
           $('body').css('background', 'url(url-to-image-one) no-repeat');
        }
        else if(hour > 12 && hour < 18)
        {
           // It's noon
           $('body').css('background', 'url(url-to-image-two) no-repeat');
        }
        else
        {
            // It's night
            $('body').css('background', 'url(url-to-image-three) no-repeat');
        }
    }, 1000 * 60 *60);

});

edited Oct 18 '16 at 13:58

answered Oct 17 '16 at 15:39

Cashif Ilyas

1,619
2
14
22

This is exactly what I'm looking for! I was wondering if you could explain in more detail how to implement this with my existing code. I am entirely new to javascript and doing this as an experiment. I only have previous experience with CSS & HTML. – Alison Dyer Oct 18 '16 at 05:13
1

@AlisonDyer I have updated my answer and have added complete javascript code. You need to change URLs of the images, of course. – Cashif Ilyas Oct 18 '16 at 14:00

score 1 · Answer 3 · answered Oct 17 '16 at 15:53

this is a code from John duckett's javascript and jquery book

var today= new Date();
var hourNow = today.getHours();
var greeting;
if (hourNow > 18) {
greeting= 'Good evening!';
else if (hourNow > 12) {
greeting = ' Good afternoon!';
else if (hourNow > 0) {
greeting = 'Good morni ng!';
else {
greeting = 'Welcome! ' ;
}
document .write( ' <h3>' +greeting + ' </ h3> ');

the value of the variable greeting is change base on the if condition. See Date and getHours() method

How Do I Change A Body Background Image Every Hour?

3 Answers3