如何使用Javascript在父div内的随机位置生成多个div？答案

【问题标题】：How to generate multiple div at random position inside a parent div using Javascript?如何使用Javascript在父div内的随机位置生成多个div？
【发布时间】：2021-11-30 03:00:41
【问题描述】：

我实际上是在尝试创建一个游戏，当有人将鼠标悬停在灰色区域时，它会询问他是否想玩，如果他确认然后随机 5 个 div 将出现在该父 div 的某个不同区域。
起初应该只有 1 个大 div。当有人将鼠标悬停时，如果他想玩游戏，就会有选项。然后大 div 将在其中生成 5 个小 div。（接下来如果有人点击小div并需要跟踪点，我会删除，所以这是一个小游戏，仅供我学习使用
但我卡在这里是因为我无法在随机位置生成 div。如果你运行我的代码，当你确认播放时，你会看到 3 个 div 垂直出现

function hoverinside(x) {
    let answer = confirm("Do you want to play the game?");

    if (answer == true) {
        alert("Enjoy the game");
        
       myFunction();
    }
    else {
        alert("If you want to play just hover on the gray area again");
        location.reload();

    }
}




function myFunction() {
    
    var element = document.createElement('div');
    element.style.cssText = "width:55px; height:55px; background:green;";

    document.body.appendChild(element);

    var div1 = document.getElementById("square");
    div1.insertBefore(element, div1.childNodes[5])



    var element2 = document.createElement('div');
    element2.style.cssText = "width:55px; height:55px; background:yellow;"

    document.body.appendChild(element2);

    var div2 = document.getElementById("square");
    div2.insertBefore(element2, div2.childNodes[5])


    var element3 = document.createElement('div');
    element3.style.cssText = "width:55px; height:55px; background:red;";

    document.body.appendChild(element3);

    var div3 = document.getElementById("square");
    div3.insertBefore(element3, div3.childNodes[5])



}

function removediv1() {
    var element = document.getElementById("div2");
    element.classList.remove("div2");
  }

h1 {
    font-style: bold;
    color: brown;
}
#square{
    height: 350px;
    width: 700px;
    background-color: rgb(170, 168, 168);
    border: brown;
    border-style: solid;
}
#square1{
    height: 35px;
    width: 70px;
    background-color: rgb(245, 10, 10);
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="gamejs.js"></script>
    <title>Game</title>
</head>
<body onload=OpenInNewtab(google.com)>
    <h1>Game:</h1>
    
    <p>we will create the game over here. no problem just wait and chill and play with us.we will create the game over here. no problem just wait and chill and play with us.</p>
    <h1>Points:</h1>
    <br>
    <div id="square" onmouseover="hoverinside(this)" >
         <div id="child1"> </div>
    </div> 

</body>
</html>

这是我的代码

【问题讨论】：

你能澄清一下吗？您的意思是 5 divs 将出现在父 div 内，但在随机位置？
您好，我已经添加了我的代码。我需要更改的地方请提及是否有人可以提供帮助非常感谢您

标签： javascript dom-events

【解决方案1】：

你可以这样做。

步骤

创建child div
不需要添加id。
为了区分，添加不同的颜色
将child div 设为绝对值
将随机的left & right 位置样式添加到Child Div（这将确保随机性）

更新代码，将子div限制在父div内。

你可以参考这个codepen：https://codepen.io/hackhimanshu1024/pen/JjrjOjK

Note：我没有添加悬停和删除事件。你可以根据你的代码来处理它。

注意：根据您的要求添加其他样式。

const parentBody = document.getElementById("root");
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
let i = 0, interval

function addDiv(cnt = 5) {
  const div = document.createElement('div');
  div.id = 'div';
  div.style.top = `${Math.random() * 100}%`;
  div.style.left = `${Math.random() * 100}%`;
  div.style.backgroundColor = `rgb(${Math.random() * 100},${Math.random() * 100},${Math.random() * 100})`;
  parentBody.appendChild(div);
  i++;
  if (i === cnt) clearInterval(interval);
}

function intervalDiv(){  
  i=0;
  interval = setInterval(addDiv, 1000);
}

function multipleDiv(){
  i=0;
  while(i<5){
    addDiv();
  }
}

btn1.addEventListener('click', intervalDiv);
btn2.addEventListener('click', multipleDiv);

*{
  box-sizing: border-box;
  padding:0;
  margin:0;
}

body{
  height:100vh;
  max-height:100vh;
  max-width:100vw;
  padding: 100px;
}

#root{
  height:100%;
  max-height:100%;
  position: relative;
}

#btn1, #btn2{
  position:relative;
  z-index:200;
}

#div {
  width: 200px;
  height: 200px;
  position: absolute;
  transform: translate(-50%,-50%);
}

<html>
<body>
  <div id="root">
    <button id="btn1">CLICK ME on Interval</button>
    <button id="btn2">CLICK ME for 5 times</button>
  </div>
</body>
</html>

【讨论】：

它实际上不适用于我的项目
这是在 interval 的 1sec 的随机位置创建 cnt 的 div 数量的代码。我无法理解查询。你能再解释一下吗？
是的，当然。起初应该只有 1 个大 div。当有人将鼠标悬停时，如果他想玩游戏，就会有选项。然后大 div 将在其中生成 5 个小 div。（接下来如果有人点击小 div 并需要跟踪点，我会删除，所以这是一个小游戏，仅供我学习使用）
但我卡在这里是因为我无法在随机位置生成 div。如果你运行我的代码，当你确认播放时，你会看到 3 个 div 垂直出现
也许你需要position: relative，而不是absolute。那么您可以将div.style.[top/left] = Math.random() * 100 + "%"` 替换为div.style.[top/left] = Math.random * (parentBody.offset[Width/Height] / 2)`