个人中心
gpt4 book ai didi

javascript - 在随机位置生成方 block

转载 作者：太空宇宙 更新时间：2023-11-03 22:27:06 25 4
gpt4 key购买 nike

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

这是我的代码:

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";
  }
}
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
#powerup {
  background: red;
  height: 10px;
  width: 10px;
}
<body>
  <button onclick="createObject()">Create a Block</button>
</body>

最佳答案

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

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

position: absolute 也可以使用。选择符合您要求的一项。

关于javascript - 在随机位置生成方 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50533061/

25 4 0
文章推荐： c# - 我如何列出有向图中的每条路径？ (C#)
文章推荐： node.js - AD 授权组更改未反射(reflect)
文章推荐： c# - 不同的值成员，相同的控件
文章推荐： javascript - 无法发送到特定房间和客户端(Socket.io 2.0.2)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com