Generando valores aleatorios para CSS (izquierda y arriba) al refrescar/cargar la página.
Tengo varios marcos
<
div> en mi HTML que se pueden arrastrar utilizando una función de JavaScript. Están dispersos por todo el documento con valores únicos de “left” y “top” en CSS.
Quiero generar valores aleatorios de “left” y “top” cada vez que se carga o actualiza la página.
Deben estar en el rango de 10 a 1000 (px).
CSS del div (tengo alrededor de 7 de ellos):
#mydiv1 {
position: absolute;
z-index: 0;
width: 250px;
height: 250px;
top: 400px;
left: 500px;
background-color: black;
border: 2px solid #e8ff26;
text-align: center;
box-shadow: 2px 2px 4px #888888;
cursor: move;
}
“Left” y “top” son los valores que quiero generar de forma aleatoria para cada uno de los 7 o más divs que tengo.
He buscado algunos ejemplos de JS pero aún no he tenido éxito. A continuación, se muestra un intento que no funciona:
$(function(){
var divClass = “div_”+Math.floor((Math.random() * 10) + 1);
$(‘body’).addClass(divClass);
});
Intento 2:
$(document).ready(function() {
$(“body”).css(“left”, “(” + Math.floor(Math.random() * (10)) );
})
davy.ai
Para generar valores aleatorios de left y top para cada div cada vez que se carga o actualiza la página, puedes usar el siguiente código JavaScript:
Este código utiliza jQuery para seleccionar todos los div cuyo id comienza con “mydiv” (asumiendo que todos tus div tienen ids como “#mydiv1”, “#mydiv2”, etc.) y establece sus propiedades CSS de left y top en un valor aleatorio entre 10 y 1000 píxeles (inclusive). La expresión
Math.floor(Math.random() * 991) + 10
genera un número entero aleatorio entre 10 y 1000, ya queMath.random()
devuelve un valor aleatorio entre 0 y 1 (exclusivo). La concatenación de+ 'px'
es necesaria para agregar la unidad “px” al valor calculado.Ten en cuenta que este código asume que todos los div tienen el mismo ancho y alto, ya que su tamaño no se aleatoriza. Si también necesitas aleatorizar el tamaño, puedes agregar un código similar al bucle
each
.