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

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!!

CodePudding user response：

This would be one way of doing it: using getTime() to retrieve the UTC time, convert to hours and then create a random number with the hours variable (which is always unique) to shift the image every hour.

In the following code I'm using only ten images but the random number is meant to be used for up to 100 images.

const d = new Date(), hours = Math.round(d.getTime()/(1000*60*60));
var n = hours/100000;
const imgs = [
      'https://picsum.photos/id/237/200/300', 
      'https://picsum.photos/id/236/200/300', 
      'https://picsum.photos/id/235/200/300',
      'https://picsum.photos/id/234/200/300',
      'https://picsum.photos/id/233/200/300',
      'https://picsum.photos/id/232/200/300',
      'https://picsum.photos/id/231/200/300',
      'https://picsum.photos/id/230/200/300',
      'https://picsum.photos/id/229/200/300',
      'https://picsum.photos/id/228/200/300'
];

/* The variable 'hours' will always be unique, so why not create
a random number from that variable? */

let hours_str = hours.toString(),
  arr = [
    parseInt(hours_str.slice(0,2)),
    parseInt(hours_str.slice(2,4)),
    parseInt(hours_str.slice(4,6))
  ];

var rand = 1;

function getRand(entryArr){
  for(let i = 0; i < arr.length; i  ){
    if(arr[i] !== 0){ rand = rand * arr[i] }
  }
  return rand;
}

rand = getRand(arr);
let number = rand.toString();
rand = number.slice(number.length-3,number.length-1);
rand = parseInt(rand);

// "kind a random" number between 0 and 99 
// console.log(rand) 

n = Math.round(rand/10);
document.getElementById('root').innerHTML = '<img src='   imgs[n]   '/>';

<div id="root"/>

Note: don't expect this code to be perfect. It can definitely be improved, but maybe it's a good starting point for tackling this challenge without a back-end.

CodePudding user response：

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).