如何通过在随机位置附加div来定位一个图像,但是在javascript的特定宽度和高度内？

2023年7月23日 252次阅读

我想在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_position递增20.基本上你选择一个随机的开始,例如10,15,笑脸一个.然后笑脸两个被放置在30,45,笑脸三个在50,65等.要解决这个问题,你需要为每个图像重新生成两个位置.

以下代码将执行您想要的操作.我从MDN(here)添加了getRandomInt,以便更容易获得您想要的数字.

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的位置设置为relative,设置宽度和高度,并更新此代码以获取divs维数(例如,使用答案here).图像应根据其左上角定位,因此您还需要从用于生成随机位置编号的宽度和高度中减去图像的宽度和高度,以防止图像在底部或右侧溢出.

点赞