Question

我试图在屏幕上的随机位置创建元素，但我遇到了一些麻烦。创建元素有效但当我尝试使它们具有随机位置时，没有任何反应。感谢您的帮助。

这是我的代码：

＆＃13;

var newObject = document.createElement("DIV");
newObject.setAttribute("class", "object");
newObject.setAttribute("id", "powerup");
document.body.appendChild(newObject);
var powerup = document.getElementById("powerup");
var object = document.getElementsByClassName("object");
for (i = 0; i < object.length; i++) {
  object[i].style.top = Math.floor(Math.random() * window.innerHeight) + 50 + "px";
  object[i].style.left = Math.floor(Math.random() * window.innerWidth) + 50 + "px";
}

function createObject() {
  var newObject = document.createElement("DIV");
  newObject.setAttribute("class", "object");
  newObject.setAttribute("id", "powerup");
  document.body.appendChild(newObject);
  for (i = 0; i < object.length; i++) {
    object[i].style.top = Math.floor(Math.random() * window.innerHeight) + 50 + "px";
    object[i].style.left = Math.floor(Math.random() * window.innerWidth) + 50 + "px";
  }
}

＆＃13;

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
#powerup {
  background: red;
  height: 10px;
  width: 10px;
}

＆＃13;

<body>
  <button onclick="createObject()">Create a Block</button>
</body>

＆＃13;

Answer 1

您的代码运行正常。它能够设置每个#powerup元素的顶部和左侧。唯一的问题是position的{{1}}默认为#powerup。所以你只需要将static元素的css更改为

#powerup

#powerup { background: red; height: 10px; width: 10px; position: relative; }也可以使用。选择符合您要求的那个。

Answer 2

我made a CodePen代码。

对于要使top和left属性生效的元素，您需要将position: absolute;添加到#powerup元素。

#powerup {
  background: red;
  height: 10px;
  width: 10px;
  position: absolute;
}

此外，我不确定这是否符合您的意图，但只要您点击按钮，您的JavaScript代码就会为每个预先存在的#powerup元素选择一个新的随机位置。

产卵块随机位置

2 个答案: