CODEWITHSUNDEEP
javascripthtmlcssbackgroundbackground-image
theAlphaMelon
theAlphaMelon

Reputation: 17

Changing HTML Background Image Using JavaScript, depending on time of day (Using Multiple Images)?

So I'm trying to change the background image of my website to correlate with the time of day.

Ex. It's evening, so background picture would change to a sunset. It's morning, background picture would be a sunrise.

BUT, I am wanting to have the function choose from several arrays of pictures randomly. Such as, I would have an array of 3 evening, an array 3 morning, an array of 3 afternoon, etc. Depending on the time of day, the function would choose a picture randomly from the correlating array and would then use that picture for the background.

I don't know if it's possible, but I would appreciate any guidance.

EDIT:

//Greeting based on time of day

var today = new Date();
var hourNow = today.getHours();
var greeting;
var style;

if(hourNow >= 18) {
    greeting = 'Good evening.';
} else if (hourNow >= 12) {
    greeting = 'Good afternoon.';
} else if (hourNow > 0) {
    greeting = 'Good morning.';
} else {
    greeting = 'Hello.';
}


document.write('<h1>' + greeting + '</h1>');

There isn't any of the image arrays on there because I really just don't know how to type out an array of the images or even the document.get?.

Upvotes: 1

Views: 2178

Answers (2)

Jinu Kurian
Jinu Kurian

Reputation: 9416

This is what you need. Date() will return the time and randOrd() will randomize the class selection. Refresh the page to see the effect.( or Click "Run the code snippet over and over again to see the effect") Hope this helps :)

function randOrd() {
  return (Math.round(Math.random()) - 0.3);
}

$(document).ready(function() {
  var today = new Date();
  var hourNow = today.getHours();
  var script = document.getElementById('date');
  
  if (hourNow < 12) {
  
    var days = ['day1', 'day2', 'day3'];
    days.sort(randOrd);
    $('#wrapper').each(function(i, val) {
      $(this).addClass(days[i]);
      script.outerHTML += '<h2>Morning</h2>' + Date();
    });
    
  } 
  
  else if (hourNow >= 12 && hourNow <= 17) {
  
    var noon = ['noon1', 'noon2', 'noon3'];
    noon.sort(randOrd);
    $('#wrapper').each(function(i, val) {
      $(this).addClass(noon[i]);
      script.outerHTML += '<h2>Afternoon</h2>' + Date();
    });
    
  } 
  
  else if (hourNow > 17 && hourNow <= 24) {
  
    var evening = ['evening1', 'evening2', 'evening3'];
    evening.sort(randOrd);
    $('#wrapper').each(function(i, val) {
      $(this).addClass(evening[i]);
      script.outerHTML += '<h2>Evening</h2>' + Date();
    });
    
  } 
  
  else /* the hour is not between 0 and 24, so something is wrong */ {
    alert("I'm not sure what time it is!");
  }
});
#wrapper {
  width: 200px;
  height: 200px;
  background-size: cover;
  display: inline-block;
  float: left;
  margin-right: 20px;
}

#date {
  display: inline-block;
  float: left;
}

.day1 {
  background: url(http://www.publicdomainpictures.net/pictures/30000/nahled/sunny-day.jpg) top center repeat-x #e0d0b7;
}

.day2 {
  background: url(http://ptb-uploads-prod.s3.amazonaws.com/blog/wp-content/uploads/2015/04/0d246de.jpg) top center repeat-x #e0d0b7;
}

.day3 {
  background: url(http://www.goodlightscraps.com/content/good-morning/good-morning-93.jpg) top center repeat-x #e0d0b7;
}

.evening1 {
  background: url(http://www.imgion.com/images/02/Good-evening-flying-bird.gif) top center repeat-x #887f70;
}

.evening2 {
  background: url(http://www.alltechguide.net/wp-content/uploads/2015/06/good-evening-sms-in-hindi.jpg) top center repeat-x #887f70;
}

.evening3 {
  background: url(http://www.db18.com/wp-content/uploads/2015/07/Loving-Good-Evening.jpg) top center repeat-x #887f70;
}

.noon1 {
  background: url(http://www.dilsecomments.com/graphics/Good-Afternoon-5677.jpg) top center repeat-x #887f70;
}

.noon2 {
  background: url(http://www.imgion.com/images/02/Sunflowers-good-afternoon.jpg) top center repeat-x #887f70;
}

.noon3 {
  background: url(http://www.dilsecomments.com/graphics/Good-Afternoon-5683.gif) top center repeat-x #887f70;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
  <div id="wrapper"></div>
  <div id="date"></div>
</body>

Here is the FIDDLE

Upvotes: 1

Alex Domenici
Alex Domenici

Reputation: 769

Thanks for posting your code.

Take a look at this, it's an extension of your code that shows you how to solve the problem. Of course, it's only intended to give you a head start. It surely isn't "production code", but it works :)

Here's the functioning code:

    <!DOCTYPE html>
    <html>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
//Greeting based on time of day

var today = new Date();
var hourNow = today.getHours();
var greeting;
var style;

var timeOfDay;            

if(hourNow >= 18) {
    timeOfDay = 1;
} else if (hourNow >= 12) {
    timeOfDay = 2;
} else if (hourNow > 0) {
    timeOfDay = 3;
} else {
    timeOfDay = 0;
}

// Randomize 3 images            
var rnd = Math.floor(Math.random() * (4 - 1) + 1); // Returns a random number between 1 (inclusive) and 4 (exclusive)

switch (timeOfDay) {
    case 1: // Evening
        greeting = 'Good evening.';

        switch (rnd) {
            case 1: document.write('<img src="EveningImage1.jpg" />'); break;
            case 2: document.write('<img src="EveningImage2.jpg" />'); break;
            case 3: document.write('<img src="EveningImage1.jpg" />'); break;
        } 
        break;
    case 2: // Afternoon
        greeting = 'Good afternoon.';

        switch (rnd) {
            case 1: document.write('<img src="AfternoonImage1.jpg" />'); break;
            case 2: document.write('<img src="AfternoonImage2.jpg" />'); break;
            case 3: document.write('<img src="AfternoonImage1.jpg" />'); break;
        } 
        break;
    case 0: // Morning
        greeting = 'Good morning.';

        switch (rnd) {
            case 1: document.write('<img src="MorningImage1.jpg" />'); break;
            case 2: document.write('<img src="MorningImage2.jpg" />'); break;
            case 3: document.write('<img src="MorningImage1.jpg" />'); break;
        } 
        break;
    default: // Generic
        greeting = 'Hello.';

        switch (rnd) {
            case 1: document.write('<img src="GenericImage1.jpg" />'); break;
            case 2: document.write('<img src="GenericImage2.jpg" />'); break;
            case 3: document.write('<img src="GenericImage1.jpg" />'); break;
        }
        break;
} 

document.write('<h1>' + greeting + '</h1>');

        </script>
        <body>

        </body>
    </html>

I hope it helps ;)

Upvotes: 0

Related Questions