Quiero crear una lista HTML que se barajee sola una vez por semana y cualquiera que acceda al sitio web verá la misma lista barajada. El JavaScript que se baraja es idéntico a la pregunta más votada sobre el tema , así que me abstendré de publicar eso aquí.
El problema con esto es que la lista mezclada es inconsistente entre dispositivos. Intenté configurar un temporizador para controlar cuándo se activa el script, como puede ver aquí:
var ul = document.querySelector("ul"), // get the list temp = ul.cloneNode(true); // clone the list // shuffle the cloned list (better performance) for (var i = temp.children.length + 1; i--; ) temp.appendChild(temp.children[Math.random() * i |0] ); var weekInMilliseconds = 60*1000; // == 604800000 ms var lastInfo = parseInt(localStorage.getItem('info'), 10); // either NaN or timestamp if(isNaN(lastInfo)) lastInfo = 0; // 1970, mind you // if last info showed earlier than one week ago: if(lastInfo < (Date.now() - weekInMilliseconds)){ localStorage.setItem('info',Date.now()); // set info date now ul.parentNode.replaceChild(temp, ul); // copy shuffled back to 'ul' // display your information }Mis problemas con esto fueron que, nuevamente, la lista no era consistente y, aunque detuvo con éxito la activación del script hasta que pasó suficiente tiempo, ya que no hubo una alteración real en el HTML, si hubo una actualización antes del intervalo la página simplemente se cargaría con el orden de lista predeterminado, no aleatorio, como está escrito en el HTML original.
Soy bastante nuevo en el diseño web, así que no estoy seguro de qué probar a continuación y mi navegación por W3 ha sido infructuosa. ¡Cualquier ayuda será apreciada, gracias!
Por lo tanto, mezclar aleatoriamente será inconsistente ya que difiere cada vez que recarga la página. Para mezclar consistentemente, puede intentar crear una lógica de reproducción aleatoria pseudoaleatoria, así que evite usar Math.random() aquí.
Necesitamos crear una semilla, en este caso estamos calculando el índice de la semana del calendario y concatenando este número en particular con el año actual para evitar repetir el mismo comportamiento aleatorio todos los años.
const seed = Math.ceil((new Date().getDay() + 1 + Math.floor((new Date() - new Date(new Date().getFullYear(), 0, 1)) / (24 * 60 * 60 * 1000))) / 7) + new Date().getFullYear();o más pequeño:
const seed = Math.ceil(((new Date() - new Date(new Date().getFullYear(), 0, 1)) / 86400000 + new Date(new Date().getFullYear(), 0, 1).getDay() + 1) / 7);Necesitamos un generador "aleatorio" como este método simple:
const getRandom = () => { const val = seed / (2 ** 32); seed = (1664525 * seed + 1013904223) % (2 ** 32); return val; }Ahora podemos comenzar a barajar las entradas de nuestra lista usando la respuesta vinculada a esta pregunta:
for (var i = list.children.length; i >= 0; i--) list.appendChild(list.children[getRandom() * i | 0]);Eche un vistazo a este fragmento de trabajo, tenga en cuenta que el orden de la lista cambiará cada semana:
// create seed that changes every new week and will not repeat since we concat it with the current year let seed = Math.ceil(((new Date() - new Date(new Date().getFullYear(), 0, 1)) / 86400000 + new Date(new Date().getFullYear(), 0, 1).getDay() + 1) / 7); // create pseudo random numbers const getRandom = () => { const val = seed / (2 ** 32); seed = (1664525 * seed + 1013904223) % (2 ** 32); return val; } // pseudo shuffel list const list = document.querySelector('ol'); for (let i = list.children.length; i >= 0; i--) list.appendChild(list.children[getRandom() * i | 0]); <ol> <li>Al Pacino</li> <li>Bill Gates</li> <li>Carsten Stahl</li> <li>David Beckham</li> <li>Elon Musk</li> <li>Frank Ocean</li> </ol>