刷新/加载页面时为 CSS（左和上）生成随机值

Question

I have several frames in my html that are draggable using a js function. They are scattered around with a unique "left" and "top" values in CSS.

I want to generate random left and top values every time the page is loaded / refreshed. They should range from 10 to 1000 (px).

div CSS (I have around 7 of them):

#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 and top are what I want to randomize for each of the 7 or more divs I have.

I looked up some JS examples but I have not been successful yet. Below is a not working attempt:

$(function(){
    var divClass = "div_"+Math.floor((Math.random() * 10) + 1);
    $('body').addClass(divClass);
});

attempt 2:

$(document).ready(function() {
    $("body").css("left", "(" + Math.floor(Math.random() * (10)) );
});

Answer 1

Random values can be generated and applied without using the JQuery

 const myDiv = document.querySelector("#mydiv1"); const randomLeftValue = Number.parseInt(Math.random() * (1000 - 10) + 10); const randomTopValue = Number.parseInt(Math.random() * (1000 - 10) + 10); myDiv.style.top = `${randomLeftValue}px`; myDiv.style.left = `${randomTopValue}px`;

 #mydiv1 { position: absolute; z-index: 0; width: 250px; height: 250px; background-color: black; border: 2px solid #e8ff26; text-align: center; box-shadow: 2px 2px 4px #888888; cursor: move; }

 <div id="mydiv1"> </div>

Answer 2

document.addEventListener("DOMContentLoaded", function(event) { 
    let item        = document.getElementById('mydiv1');
    let rng_top     = Math.floor(Math.random() * 1000);
    let rng_left    = Math.floor(Math.random() * 1000);
    item.style.top  = `${rng_top}px`;
    item.style.left = `${rng_left}px`;
});

Answer 3

$('document').ready(() => { // will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

const left = Math.floor(Math.random() * 991 + 10); // random int [10 - 1000]

const top = Math.floor(Math.random() * 991 + 10); // random int [10 - 1000]

$('#mydiv1').css({ 'left': `${left}px`, 'top': `${top}px` }); // styling the div 

});

Answer 4

I'm a bit confused with what you are trying to achieve, but from what I understand you need to do this: generate a random integer between 10 and 1000, and assign for each frame wrapper (here named 'frame' ) random left and top values.

const getRandomInteger = (max = 1000, min = 10) => {
  return Math.round(Math.random() * (max - min) + min) + "px";
}

$(function () {
  $('.frame').each((index, element) => {
    $(element).css({top: getRandomInteger(), left: getRandomInteger()});
  });
});