How do I randomly change an HTML element on a timer using Javascript - across the web, not just within the browser?

Question

Sorry if my question is phrased dumbly - i didn't know exactly how to explain, Basically, I'm practicing creating a website with HTML, CSS. and JavaScript, I have a picture element on my page. among other elements.

What I want to achieve is randomly changing that picture every hour. I am able to do this perfectly fine by running it in my browser. My question is, how does one randomly change an element across the board (the entire internet) for all users?

The way I have it written, it only runs the random pic function within my browser, and resets every time I refresh the page.

I am currently using setInterval() and checking the time constantly to see if the current date.getMinutes() == 0, then I figure it's a new hour, and i call a changePicHourly() function. I have no problem getting this to work. However, obviously every visitor to my page will see a different picture. I do not want this. I want consistency across time and space. Haha.

I am not asking for specific coding instructions - I am more trying to understand the concept. How does one change elements internet-wide?

Hopefully I am making this clear. Thank you!!

Answer 1

This would be one way of doing it. Using getTime() to retrieve the UTC time in seconds, convert to hours and then use the last digit for a world time reference to shift the image.

If you would like to shift between 99 images then use the last two digits of the hour variable. And if you would like to shift between more images then you understand the logic...

 const d = new Date(), hours = d.getTime()/(1000*60*60), n = Math.round(hours/100000), imgs = [ 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300' ]; document.getElementById('root').innerHTML = '<img src=' + imgs[n] + '/>';

 <div id="root"/>

Answer 2

Here is a slightly different pseudo random number generator based on a seed value calculated from the current UTC hour:

 const d = new Date(), imgs = [...Array(100)].map((c, i) => 'https://picsum.photos/id/X/200/300'.replace("X", 216 + i)); // define a seed-based random number generator (later: "rand()"), as suggested in // https://stackoverflow.com/questions/521295/seeding-the-random-number-generator-in-javascript function sfc32(a, b, c, d) { return function() { var t = (a + b) | 0; a = b ^ b >>> 9; b = c + (c << 3) | 0; c = (c << 21 | c >>> 11); d = d + 1 | 0; t = t + d | 0; c = c + t | 0; return (t >>> 0) / 4294967296; } } // create a seed, based on the current hour in UTC time: const seed = Math.round(new Date().getTime() / (1000 * 60 * 60)); // initialise the number generator rand() with this seed: const rand = sfc32(0x9E3779B9, 0x243F6A88, 0xB7E15162, seed ^ 0xDEADBEEF); // carry out some initial "mixing"... for (let n = 15; n--;) rand(); // now rand() will deliver a pseudo-random number that will be reproducible for identical seeds. let src = `<img src="${imgs[Math.floor(rand()*100)]}">`; document.getElementById("root").innerHTML = `<img src="${imgs[Math.floor(rand()*imgs.length)]}">`;

 <div id="root"></div>

In the expression [...Array(100)] I limited the number of pictures to choose from to 100. You can of course use any number of pictures here.

Answer 3

You will have to do this in the frontend since you don't know when a user will load your page.

Have an array of images, say 24, one for each hour of a day.

When a page loads you get the current time in some fixed point - let's say you use UTC, you can't use local time for this. Once you have this standard time, work out the last hour that has been passed. Use this to look up which image to show.

Also use this to setTimeout of 60minutes - currentminutes.

On the timeout, move to the next image and set another timeout of 60minutes - current minutes. And so it goes on.

That way any user wherever in the world will see the same background image, give or take a bit of timing inaccuracy (which depends for example on what else their system is doing at the time).