0

Как сделать, чтобы объекты рандомно появлялись на разных местах?

$(document).ready(function () {
    $('#button').on('click', function () {
        var randName = GetNumber(0, 255)
        $('#container').prepend("<div class='circle "+ randName +" '>" + randName + "</div>")

        $("." + randName).css("background-color", "#" + GetNumber(0, 9)  + GetNumber(0, 9)  + GetNumber(0, 9)  + GetNumber(0, 9)  + GetNumber(0, 9)  + GetNumber(0, 9) );
        $("." + randName).css("width", GetNumber(50, 400) + "px");
        $("." + randName).css("height", GetNumber(50, 400) + "px");
        $("." + randName).css("left", GetNumber(50, 400) + "px");
    });
    function GetNumber(min, max) {
        return Math.floor(Math.random()*(max - min + 1)) + min;
    }
});

2 ответа 2

1

Объект появляется. Вы просто контейнеру обертке не задали размеров. Ну и там position:absolute; возможно. Хотя мне не понятно, зачем это...

$('#button').on('click', function() {
  var randName = GetNumber(0, 255)
  $('#container').prepend("<div class='circle " + randName + " '>" + randName + "</div>")

  $("." + randName).css("background-color", "#" + GetNumber(0, 9) + GetNumber(0, 9) + GetNumber(0, 9) + GetNumber(0, 9) + GetNumber(0, 9) + GetNumber(0, 9));
  $("." + randName).css("width", GetNumber(50, 400) + "px");
  $("." + randName).css("height", GetNumber(50, 400) + "px");
  $("." + randName).css("left", GetNumber(50, 400) + "px");
});

function GetNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
#container {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Random</button>
<div id="container"></div>

1

Пример с изменением положения, масштаба, цвета фигур

const btn = document.getElementById('btn');
const poly = document.getElementById('poly');

btn.onclick = () => { 
  const transform = `translate(${getRandomArbitrary(0, 100)} ${getRandomArbitrary(0, 100)}) scale(${getRandomArbitrary(1, 4)} ${getRandomArbitrary(1, 4)})`;
  const colors = ['red','yellow','green','blue','orange','purple','black','white','greenyellow','dodgerblue','gold'];
 
 poly.style.fill = colors[Math.floor(Math.random() * colors.length )];
 poly.setAttribute('transform', transform);
 
};

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
button {
  display: block;
}
svg {
width:50%;
height:50%;
}
<button id="btn">Random</button>
<svg viewBox="0 0 500 500">
  <polygon id="poly" points="50,25 86,45.83 86,87.5 50,108.3 14,87.53 14,45.83"></polygon>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.