Question

我希望获得如下图所示的图像。

更具体地说，我需要在500px区域内随机分布笑脸，并在该区域的右侧设置边框。

但是使用以下代码我得不到所需的结果。

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            position: absolute
        }

        div {
            width: 500px;
            height: 500px
        }

        #rightSide {
            position: absolute;
            left: 500px;
            border-left: 1px solid black
        }
    </style>
</head>
<body onload="generateFaces()">

<div id="leftSide"></div>
<div id="rightSide"></div>
<script>
    var numberOfFaces = 5;
    var top_position = 400;
    var left_position = 400;
    var theLeftSide = document.getElementById("leftSide");
    var i = 0;
    function generateFaces() {
        while (i < numberOfFaces) {
            var this_img = document.createElement("img");
            this_img.src = "#";

            this_img.style.top = top_position + "px";
            this_img.style.left = left_position + "px";
            theLeftSide.appendChild(this_img);
            top_position = top_position - 50;
            left_position = left_position - 50;
            i++;
        }
    }
</script>

</body>
</html>

＆＃13;

我为上面的代码段获得的结果看起来像

我将如何做到正确？

Answer 1

在while循环中，每次从top和left减去50，因此每张图片的距离均为均匀。

将Math.random()用于随机值。该函数返回0到1之间的值，因此乘以容器大小以获得随机位置。

Answer 2

如果您想使用随机位置：

top_position  = Math.random()*400; left_position = Math.random()*400;
this_img.style.top = top_position + "px";
this_img.style.left = left_position + "px";
theLeftSide.appendChild(this_img);

这是小提琴：https://jsfiddle.net/v222wgav/1/

Answer 3

这是您生成随机 top_position位置和随机 left_position位置的方法。

您应该能够修改以下代码以满足您的需求。

我已经包含了一个随机函数getRandom，它只是一个标准＆＃34;获得此范围内的随机数＆＃34;功能

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

要使用它，只需提供最少数量的像素，以及所需范围内的最大像素数。

getRandom(0, 400);

＆＃13;

var numberOfFaces=5;
var top_position = getRandom(0, 400);
var left_position = getRandom(0, 400);
var theLeftSide = document.getElementById("leftSide");
var i = 0;
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateFaces()
{
  while(i < numberOfFaces)
  {
    var this_img = document.createElement("img");
    this_img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/718smiley.svg/60px-718smiley.svg.png";

    this_img.style.top = top_position + "px";
    this_img.style.left = left_position + "px";
    theLeftSide.appendChild(this_img);
    top_position = getRandom(0, 400);
    left_position = getRandom(0, 400);
    i++;
  }
}

＆＃13;

img {
  position:absolute
}
div {
  width:500px;height:500px
}
#rightSide {
  position:absolute;
  left: 0px;
  top: 0px;
  border-right: 1px solid black
}

＆＃13;

<!DOCTYPE html>
<html>
		<body onload="generateFaces()">
				
				<div id="leftSide"></div>
			    <div id="rightSide"></div>
		</body>
</html>

＆＃13;

我会像这样一起取消#rightSide div：

＆＃13;

var numberOfFaces=5;
var top_position = getRandom(0, 400);
var left_position = getRandom(0, 400);
var theLeftSide = document.getElementById("leftSide");
var i = 0;
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateFaces()
{
  while(i < numberOfFaces)
  {
    var this_img = document.createElement("img");
    this_img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/718smiley.svg/60px-718smiley.svg.png";

    this_img.style.top = top_position + "px";
    this_img.style.left = left_position + "px";
    theLeftSide.appendChild(this_img);
    top_position = getRandom(0, 400);
    left_position = getRandom(0, 400);
    i++;
  }
}

＆＃13;

img {
  position:absolute
}
div {
  width:500px;height:500px
}
#leftSide {
  border-right: 1px solid black
}

＆＃13;

<!DOCTYPE html>
<html>
		<body onload="generateFaces()">
				
				<div id="leftSide"></div>
		</body>
</html>

＆＃13;

快乐随机表情符号！

资源：

图片来源：https://commons.wikimedia.org/wiki/File:718smiley.svg

How to use generate random numbers in a specific range

Answer 4

如果您需要随机位置，您只需要随机功能。对于固定位置，您需要实施特定的位置检查。

top_position  = Math.random()*400; left_position = Math.random()*400;

JS小提琴 - https://jsfiddle.net/manishghec/13k8caen/

无法将图像元素放在正确的位置

4 个答案:

资源：