How do show hide image on time in html

Suppose that i have two images x.jpg and y.jpg and i want make X.jpg visible at 2:00 pm and Y.jpg at 3:00 pm how could i do it using html and java script

Does the time need to be specified from a central location, or would reading the local clock be OK? In other words, I can change my local clock and have the images appear whenever I want.

no time is specified with respect to local time

Now see
Suppose that the local time is 12:00 pm so none of the time will have to be show
when local time is 2:00 pm show image =x.jpg and time local time = 3:00pm show image =y.jpg
and hide x.jpg

Something like this

var OPENAT = 2.00; var CLOSEAT = 3.00 function areWeOpen( ) { var sign = document.getElementById("openSign");

reply fast man

You’d want to rely on a server time because you have no idea if the local time is right - at least for something like a we’re open sign.

But if you’re talking just local system time, you can get the current hour (0-23) using new Date().getHours(). From that you just see if >= 2 and <= 3

var OPENAT = 2; 
var CLOSEAT = 3;
var currentDate = new Date();
var currentHour = currentDate.getHours(); // or get from a more reliable source
if (currentHour >= OPENAT && currentHour <= CLOSEAT) {
  // show open sign
} else {
  // show closed sign
}

How you show which sign can be done any number of ways. You can show/hide with css or you can create and add the image with JavaScript. Or you can have the image already there but have no defined src and use JS to set the src once you know what it needs to show…

// ...
var sign = document.getElementById("sign");
if (currentHour >= OPENAT && currentHour <= CLOSEAT) {
  sign.src = "open.jpg";
} else {
  sign.src = "closed.jpg";
}
1 Like

For getting the time from a more reliable source, you could try this API: http://davidayala.eu/current-time/

If you aren’t familiar with making HTTP requests, this article will help: https://www.kirupa.com/html5/making_http_requests_js.htm

Cheers,
Kirupa :stuck_out_tongue:

can you please give an example using this script with x.jpg and y.jpg in want it with local time on server please …

It’s pretty much what I posted above. I’ll hook into kirupa’s time api to get a server time too… via fiddle (no images are seen because x and y don’t exist)

https://jsfiddle.net/aysk29d6/