Estoy creando un sitio web con HTML, CSS y JavaScript. Tengo un elemento de imagen en mi página, entre otros elementos.
Lo que quiero lograr es cambiar aleatoriamente la imagen cada hora. Puedo hacer esto perfectamente bien ejecutándolo en mi navegador.
Mi pregunta es: ¿cómo se cambia aleatoriamente un elemento en todos los ámbitos (todo Internet) para todos los usuarios?
Tal como lo tengo escrito, solo ejecuta la función de imagen aleatoria dentro de mi navegador y se reinicia cada vez que actualizo la página.
Actualmente estoy usando setInterval() y verifico la hora constantemente para ver si la date.getMinutes() === 0 , luego calculo que es una nueva hora, y llamo a una función changePicHourly() .
No tengo ningún problema para que esto funcione. Sin embargo, obviamente cada visitante de mi página verá una imagen diferente. No quiero eso. ¡Quiero consistencia a través del tiempo y el espacio! Ja ja.
No estoy pidiendo instrucciones de codificación específicas, estoy más enfocado en tratar de entender el concepto. ¿Cómo se cambian los elementos en todo Internet?
Espero estar dejando esto claro. ¡¡Gracias!!
Esta sería una forma de hacerlo sin un back-end:
Usando new Date.getTime() para recuperar la hora UTC, que es la misma para todas las computadoras conectadas a Internet. Luego, convierta estos milisegundos en horas y cree un número pseudoaleatorio para cambiar la imagen cada hora.
En el siguiente código, estoy usando solo diez imágenes, pero el número aleatorio debe usarse para hasta 100 imágenes.
const hours = Math.round(new Date().getTime()/(1000*60*60)), numbers = [ Number(hours.toString().slice(0,2)), Number(hours.toString().slice(2,4)), Number(hours.toString().slice(4,6)) ], images = [ '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' ]; function hourlyRand(){ const pseudoRandString = (numbersArr) => { let rand = 1 numbersArr.forEach((n, i) => { if(n !== 0) rand = rand * n }) return rand.toString() } // get a pseudo random number and convert to string let randString = pseudoRandString(numbers) // length of the pseudo random number string let L = randString.length // slice the string and convert to number let n = Number(randString.slice(L-3,L-1)) // return the double digit hourly random number return n } // pseudo-random number between 0 and 99 console.log('Hourly pseudo-random number: ' + hourlyRand()) // pseudo-random number between 0 and 9 let n = Math.round(hourlyRand()/10) document.getElementById('root').innerHTML = '<img src=' + images[n] + '/>' <div id="root"/>Si fuera mi proyecto, construiría la lógica en el back-end y luego usaría una API en el front-end para representar las imágenes de la forma que desee. Esto permitiría a todos los usuarios ver los mismos cambios que se producen en un momento determinado.
Aquí hay un generador de números pseudoaleatorios ligeramente diferente basado en un valor inicial calculado a partir de la hora UTC actual:
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> En la expresión [...Array(100)] limité el número de imágenes para elegir a 100. Por supuesto, puede usar cualquier número de imágenes aquí.