Change image by current time

Question

I have two images. I want to display one image if its day and another if it night. This should be done using javascript. For example display one image from 8:00 to 00:00 and another from 00:00 to 8:00. Is that possible using javascript?

Answer 1

If you give the image an ID then you can modify it's src property depending on the time of the user's browser.

Answer 2

You could use a setInterval() that runs every so often. How accurate you want it to be is up to you.

In this example, it runs every minute:

HTML

<img id='theImage' src='images/day.jpg' />

javascript

      // setInterval makes the code run every xx milliseconds
      //    if you just want it to run, delete this top line,
      //    and the last line
setInterval(function() {

      // Create a new Date object with the current date/time
    var date = new Date();

      // Get a reference to the image in the HTML using its ID attribute
    var img = document.getElementById('theImage');

      // getHours() gets the hour of the day from 0 - 23,
      //    so the way it is set up, if the hour is less
      //    than 8, the first block will run, otherwise
      //    the second block will run
    if (date.getHours() < 8) {

                // This simply checks the src attribute of the image to see
                //    if it already contains the word "night". That way we
                //    don't update the src unless we need to.
                // You could also eliminate this check if you're not going
                //    to use setInterval.
        if( img.src.indexOf('night') < 0 ) {

                        // So if the hour is less than 8, and the
                        //    src did not contain "night", then we need
                        //    to change the src to the "night" image.
            img.src = 'images/night.jpg'
        }
    } else {
                // Same as above, only it executes if the hour was greater
                //    than 8.
                // Again, you could eliminate the check for the word
                //    "day" if you're not going to use setInterval.
        if( img.src.indexOf('day') < 0 ) {
            img.src = 'images/day.jpg'
        }
    }
    // Run the setInteval every 60000 milliseconds
    // Delete this line as well if you're not using setInterval
},60000);

You can get rid of the setInterval() if you don't need it to change when the clock changes. (Only happens twice a day, so the setInterval() may be overkill.)

If that's the case, just delete the first and last lines. Then it will just run when the page loads.

---

EDIT: From your comment, if you were to change the interval from 15:00 to 16:00 (and vice versa), you would just change the if() that tests the hour to this:

if(date.getHours() < 15 || date.getHours() >= 16) {
      // set one image
} else {
      // set the other image
}

---

EDIT: To modify a div's class instead of an image's src, do this:

Change the getElementById() line to point to your <div>, like:

var div = document.getElementById('theDiv');

Then update the className attribute instead of src, as in:

div.className = "someNewClass";

Please note that this will overwrite the entire class attribute, so if your element has several classes, we'll need to be a little more careful about adding/removing the class.

If you're keeping the code that tested the image to see if it already had the proper image, then you would do something similar for the div:

if(div.className.indexOf('someUniqueWord') < 0) {...

Again, you don't need to do these checks. It just makes it so that the element is not modified unless absolutely necessary.

Answer 3

var img = document.createElement('img');
calcSrc();
setInterval(calcSrc, 60000);

document.body.appendChild(img); // place image

function calcSrc() {
    img.src = new Date().getHours() < 8 ? 'night.jpg' : 'day.jpg';
}

Answer 4

I am quite surprised about a few things in your code, J-P

1. calcSrc without quotes and brackets, e.g. 'calcSrc()'
2. img keeps its handle after being placed in the document.

e.g.

<html>
<head>
<script>

var img,tid;
window.onload=function() {
  img = document.createElement('img');
  calcSrc();
  tId=setInterval(calcSrc, 60000);
  document.body.appendChild(img); // place image
}  

var day = 'day.jpg'
var night = 'night.jpg'


function calcSrc() {
  img.src = (new Date.getHours()<8)?night:day;
}
</script>
</head>
<body>
</body>
</html>