我想在div中添加一个图像。该图像应在500的高度和500的宽度内显示5次。它们应该随机放置在不同的位置，但它们不应该穿过div的高度和宽度。但是我的代码生成的结果是，图像总是以从右到左的倾斜线放置，并且总是创建在一起的面。
这是我的密码：
var theLeftSide = document.getElementById("leftSide");
var top_position = Math.random() * 500 - 100;
var left_position = Math.random() * 500 - 100;
numberOfFaces = 5;
function generateFaces() {
for (var i = 0; i < 6; i++) {
createElement(i);
numberOfFaces += numberOfFaces;
}
}
function createElement() {
var image = document.createElement('img');
image.src = "smile.png";
image.style.position = 'absolute';
image.style.top = top_position + "px";
image.style.left = left_position + "px";
theLeftSide.appendChild(image);
top_position += 20;
left_position += 20;
}
图像被放置在对角线中，因为您每次调用都会递增top_position和left_position20。基本上，你选择一个随机的开始，例如10,15，作为笑脸1。然后笑脸2被放置在30,45，笑脸3被放置在50,65，等等。要解决此问题，您需要为每个图像重新生成两个位置。
下面的代码将做你想要的。我添加了来自MDN（此处）的getRlandInt，以便更容易获得您想要的数字。
var theLeftSide = document.getElementById("leftSide");
var top_position;
var left_position;
numberOfFaces = 5;
function generateFaces() {
for (var i = 0; i < 6; i++) {
top_position = getRandomInt(0, 500);
left_position = getRandomInt(0, 500);
createElement(i);
numberOfFaces += numberOfFaces;
}
}
function createElement() {
var image = document.createElement('img');
image.src = "smile.png";
image.style.position = 'absolute';
image.style.top = top_position + "px";
image.style.left = left_position + "px";
theLeftSide.appendChild(image);
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
请记住，这与div的边界无关。为此，您必须将div的位置设置为相对，设置宽度和高度，并更新此代码以获得div尺寸（例如，使用此处的答案）。图像的位置应基于其左上角，因此您还需要从用于生成随机位置号的宽度和高度中减去图像的宽度和高度，以防止图像从底部或右侧溢出。
