如何使用Javascript將隨機元素放置在HTML文檔中？

-1

我正在開發一款Javascript遊戲，我必須在HTML文檔中放置隨機硬幣。我已經使用此代碼到目前爲止：如何使用Javascript將隨機元素放置在HTML文檔中？

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

此代碼只是將一個圖像硬幣放置在文檔的座標（0,0）中。我想要做的是訪問最近創建的「div」，並給它一個隨機座標，我在另一個函數中生成，所以如果我多次調用createCoin，它會在文檔中創建多個硬幣。我不能使用jQuery。有任何想法嗎？

來源

2012-11-29 Barbara PM

使用Math.Random在數字範圍之間生成一個隨機值並使用這些座標 –

讓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 = ???;

來源

2012-11-29 21:11:07

如果我將數字賦給.left，並且.top不起作用。事實上，（coin.style.left）的警報返回void。這不是一種手動更改我剛創建的div屬性的方法嗎？不管怎麼說，還是要謝謝你！ –

您需要單位 - 'px'或'％'。然後，div需要絕對定位來設置它們。我假設你已經這樣做了，但也許我不應該做出這些假設。看我的編輯。 –

後創建一個ID = '硬幣' 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（）函數。

來源

2012-11-29 21:30:28 amirmohammad

如何使用Javascript將隨機元素放置在HTML文檔中？

回答

相關問題