圆倍数问题

Question

我想要完成的是，每次我单击项目中的圆圈时，它都会在浏览器的随机区域中成倍增加，最终使浏览器充满圆圈。我正在努力想出在 vanilla javscript ECMA 5 中执行此操作的正确功能。这是我到目前为止所拥有的任何指导，我们将不胜感激。这里的思考过程是创建一个克隆，然后使用 math.random 将克隆附加到随机位置。当我运行这段代码似乎没有任何反应。

index.html

<!DOCTYPE html>
<html>
<head>
<title>CircleMaker</title>
    <link href="main.css" rel="stylesheet">
</head>

<body>

    <div id="ball"></div>

</body>

    <script src="script.js"></script>
</html>

script.js

var circle = document.getElementById('ball'); 

circle.addEventListener('keydown', circleMultiplier);

function circleMultiplier(e){
    var cln = circle.cloneNode(true);

    math.random(circle.appendChild(cln));
}

main.css

html{
    box-sizing: border-box;
}

*, *::before, *::after{
    box-sizing: inherit;
}

#ball{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 200px;
    left: 200px;
    background-color: red;
    border-radius: 100px;
}

更新 1

我正在研究它的功能部分，我在这里 random position of divs in javascript 找到了一些与它接近的东西，并试图将它翻译成我想要它做的事情。到目前为止，这是我的功能：

var circle = document.getElementById('ball'); 

circle.addEventListener('keydown', circleMultiplier);

function circleMultiplier(e){
    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
    var newDiv = document.createElement('div');

    newDiv.style.position = 'absolute';
    newDiv.style.top = posx+'px';
    newDiv.style.height = posy+'px';
    newDiv.style.display = 'none';



}

更新 2

这是我的代码到目前为止的样子，但是，我收到以下错误消息

Uncaught TypeError: bod.append is not a function

var bod = document.getElementsByTagName("body")
var circle = document.getElementById('ball'); 

circle.addEventListener('click', circleMultiplier);

function circleMultiplier(){
    var divsize = ((Math.random()*100) + 50).toFixed();
    var posx = (Math.random() * document.width - divsize).toFixed();
    var posy = (Math.random() * document.height - divsize).toFixed();

    var newDiv = document.createElement('div');


    newDiv.classList.add('ball');
    newDiv.style.position = 'absolute';
    newDiv.style.top = posx+'px';
    newDiv.style.left = posy+'px';

    bod.append(newDiv);



}

更新 3

下面的代码完成了我需要它做的事情，但是它不是在屏幕上的随机位置创建它只是在 div 之上创建，请参见图像：

var circle = document.getElementById('ball'); 

circle.addEventListener('click', circleMultiplier);

function circleMultiplier(){
    var divsize = ((Math.random()*100) + 50).toFixed();
    var posx = (Math.random() * (document.width - divsize).toFixed());
    var posy = (Math.random() * (document.height - divsize).toFixed());

    var newDiv = document.createElement('div');


    newDiv.classList.add('ball');
    newDiv.style.top = posx+'px';
    newDiv.style.left = posy+'px';
    newDiv.style.position = 'absolute';

  console.log(newDiv);

    document.body.appendChild(newDiv);



}

更新 4

我得到了新的 divs 但是仍然没有圆圈出现在随机的地方这是我的代码：

var circle = document.getElementById('ball'); 

circle.addEventListener('click', circleMultiplier);

function circleMultiplier(){
    var divsize = ((Math.random()*100) + 50).toFixed();
    var posx = (Math.random() * (document.body.clientWidth - divsize).toFixed());
    var posy = (Math.random() * (document.body.clientWidth - divsize).toFixed());
    var newDiv = document.createElement('div');


    newDiv.classList.add('ball');
    newDiv.style.cssText = 'top:'+posx+'px; left:'+posy+'px; position:absolute;';


    document.body.appendChild(newDiv);



}

这是控制台的样子：

Answer 1

你基本上需要的是：

用于容纳元素的容器（具有页面的高度和宽度）
一个起始元素，您可以在其上单击以创建更多节点。
将元素放置在页面上随机位置的逻辑。

下面是一个工作示例。您需要根据第 3 点添加逻辑来完成其余部分。

https://js-qbwqev.stackblitz.io/

Answer 2

在努力工作之后，我终于弄明白了以下是为我提供所需结果的正确函数：

var circle = document.getElementById('ball'); 

circle.addEventListener('click', circleMultiplier);

function circleMultiplier(){
    var divsize = ((Math.random()*100) + 50).toFixed();
    var posx = (Math.random() * (document.body.clientWidth - divsize).toFixed());
    var posy = (Math.random() * (document.body.clientWidth - divsize).toFixed());
    var newDiv = document.createElement('div');



    newDiv.style.cssText = 'top:'+posx+'px; left:'+posy+'px; position:absolute; width: 200px; height: 200px;background-color: red; border-radius: 100px;';


    document.body.appendChild(newDiv);



}

这是我点击后的样子：

圆倍数问题

Circle Multiplier Issue

javascript

ecmascript-5