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

August 1, 2023 at 12:42 pm

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:

$(document).ready(function() {
  $('div[id^="mydiv"]').each(function() {
    $(this).css({
      left: Math.floor(Math.random() * 991) + 10 + 'px',
      top: Math.floor(Math.random() * 991) + 10 + 'px'
    });
  });
});

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 que Math.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.

Answer

davy.ai

August 1, 2023 at 12:42 pm
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:
```
$(document).ready(function() {
  $('div[id^="mydiv"]').each(function() {
    $(this).css({
      left: Math.floor(Math.random() * 991) + 10 + 'px',
      top: Math.floor(Math.random() * 991) + 10 + 'px'
    });
  });
});
```
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 que Math.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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Generando valores aleatorios para CSS (izquierda y arriba) al refrescar/cargar la página.

Answer

davy.ai