Question

我正在开发一个Javascript游戏，我必须在HTML文档中放置随机硬币。到目前为止我使用过这段代码：

 createCoin() {
    section=document.createElement("div");
    section.innerHTML='<img src="./img/coin.png"/>';
    document.body.appendChild(section);
 }

此代码只是将图像硬币放在文档的坐标（0,0）中。我想要做的是访问最近创建的“div”并给它一个随机坐标，我在另一个函数中生成，所以如果我多次调用createCoin，它会在文档中创建几个硬币。我不能使用jQuery。有什么想法吗？

Answer 1

在创建具有id ='coin'的div元素之后，为了给div提供随机位置，请使用：

<div id="coin" style="position:absolute">coin image</div>

<script language="javascript" type="text/javascript">
function newPos(){
    var x=Math.random()*1000;
    x=Math.round(x);
    var y=Math.random()*500;
    y=Math.round(y);
    document.getElementById("coin").style.left=x+'px';
    document.getElementById("coin").style.top=y+'px';
}
newPos();
</script>

我们认为createCoin（）函数在onload（）事件上执行一次。然后必须运行newPos（）函数。

Answer 2

让createCoin返回div，然后使用它。

createCoin() {
    section=document.createElement("div");
    section.innerHTML='<img src="./img/coin.png"/>';
    document.body.appendChild(section);

    section.style.position = 'absolute';
    section.style.left = '0px'; // units ('px')  are unnecessary for 0 but added for clarification
    section.style.top = '0px';

    return section;
 }

例如：var coin = createCoin(); coin.style.left = ???; coin.style.top = ???;

如何使用Javascript将随机元素放在HTML文档中？

2 个答案: