2

I've looked at some of the answers on how to change an image based on time, but my question is a little more "in depth." I hope it isn't too impossible!

Basically I have two images: A night time image, and a day time image.

What I would like to achieve is to have my website swap an image to a "night time version" of the same image at 8PM according to viewers system time and then swaps back to the original "day time" image at 6am.

That is, every 8PM to 6AM it should show the NIGHT TIME image and from 6AM to 8PM it should show the DAY TIME image. How can this be achieved? Is it possible?

If so If anyone can come up with a solution that would be great! If not at least point me in the right direction lol.

Edit: I should add that I know very little javascript. Very sorry! So I may need some explaining on how to implement the time functions to swap out images.

THANKS! X

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
XavierTheGreat
  • 287
  • 1
  • 4
  • 17
  • This might be a duplicate: http://stackoverflow.com/questions/1837183/displaying-date-time-in-users-timezone-on-client-side – khollenbeck Jan 20 '14 at 15:57
  • https://www.google.co.uk/search?q=javascript+get+current+hour dupe – Nick R Jan 20 '14 at 15:59
  • @Kris - Thank you for the links thus far everyone! I don't want to display timestamps however. I need a function that essentially "Reads the local time of the viewer" and then swap an image if that time is either 6am or 8pm. Very different if I must say.. – XavierTheGreat Jan 20 '14 at 15:59
  • Possible duplicate of [How to determine if it is day or night in javascript or jquery?](https://stackoverflow.com/questions/2250036/how-to-determine-if-it-is-day-or-night-in-javascript-or-jquery) – Damjan Pavlica Oct 24 '17 at 10:43

2 Answers2

8

Use the date object to get the current hour:

var today = new Date();
var hour = today.getHours();

if (hour > 6 && hour < 20) {
    //Day time
} else {
    //Night time
}
Randy
  • 4,351
  • 2
  • 25
  • 46
  • Excellent! So I plug this into the website as a script. Is there a way to swap the image at a certain time? I may have to do some searching on this page to see if it's possible. – XavierTheGreat Jan 20 '14 at 16:05
  • Lets say a user is on your website at 7:58PM. You can calculate the time between now and 8PM and simply use a "setTimeout(func)" which updates the image. Shouldn't be too hard. – Randy Jan 20 '14 at 16:08
  • Will take a look into this once I get some free time and play around in the code. Many thanks – XavierTheGreat Jan 20 '14 at 18:09
1

JavaScript: IF time >= 9:30 then

Might be helpful! Just write a JS method to swap the image URL at those times. I'm pretty sure the JS Date() object reads off of local time (i.e. the reader/viewer's system time).

Community
  • 1
  • 1
Gorbles
  • 1,169
  • 12
  • 27
  • Awesome thank you! And a function that swaps the images, how would this method be written? Please excuse my naiveness in javascript. lol – XavierTheGreat Jan 20 '14 at 16:07
  • Give the HTML element an ID (like `
    IMG CODE GOES HERE
    `) and use, in JavaScript, `getElementByID('test').innerHTML = "IMG CODE GOES HERE";`.     – Gorbles Jan 20 '14 at 16:22
  • Will take a look into this once I get some free time and play around in the code. Many thanks – XavierTheGreat Jan 20 '14 at 18:10