Question

我要完成的工作是，每当我在项目中单击圆圈时，它就会在浏览器中的随机区域中繁殖，最终使浏览器充满圆圈。我正在努力尝试在香草抄写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

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

未捕获的TypeError：bod.append不是函数

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

我出现了新的div，但是在随机位置仍然没有圆圈出现，这是我的代码：

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);



}

这是我单击时的外观：

圈子乘数问题

2 个答案: